problema bottoni coin slider

  • Creatore Discussione Creatore Discussione coguaro
  • Data di inizio Data di inizio

coguaro

Utente Attivo
28 Mar 2004
32
0
0
44
www.coguaro.it
slide show con coin-slider jquery
sto creando uno slide show con questo script http://workshop.rs/projects/coin-slider/ che ho pubblicato in una prova sito qua http://www.stefanoranno.it/sito_1024/ però mi ritrovo con 1 problema che cercando nel codice non sono riuscito a trovare come risolvere ( magari non è neanche possibile eventualmente potete pure proporre alternative) invece di usare i bottoni tondi o quadrati (da quello che ho capito sono grafici fatti dallo script ) vorrei usare delle immagini che scelgo io e che posso posizionare dove voglio per ora pensavo di usare dei cerchi colorati con dentro il numero da 1 a 5 ( attualmente ho solo 5 immagini nello slide) che siano sia spente che accese a seconda di dove si trova lo slide

es:

apro la pagina e lo slide parte con la prima immagine e i bottoni sono il 1° acceso e gli altri spenti passa alla seconda immagine e automaticamente si spegne il 1° bottone (di conseguenza cambia l'immagine ) e si accende il 2° (di conseguenza cambia l'immagine ) gli altri rimangono spenti (come se fosse un'altro "slide" però se uno clicca direttamente su di un numero apre nello slide l'immagine di riferimento) i bottoni che si vedono di lato sarebbero quelli che vorrei utilizzare per lo slide qualcuno mi può aiutare???
 
ho quasi risolto impostando questo da css

Codice:
.cs-buttons a
{
background-image: url('../../img/00_home/box_2/spento.jpg');
background-position: center center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 10px;
height: 20px;
vertical-align: middle;
text-align: center;
line-height: 20px;
width: 20px;
color: #989898;
font-weight: bold;
float: left;
}
a.cs-active
{
background-image: url('../../img/00_home/box_2/acceso.jpg');
background-position: center center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 10px;
height: 20px;;
vertical-align: middle;
text-align: center;
line-height: 20px;
width: 20px;
font-weight: bold;
float: left;
}
.cs-buttons a:hover
{
background-image: url('../../img/00_home/box_2/acceso.jpg');
background-position: center center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 10px;
height: 20px;;
vertical-align: middle;
text-align: center;
line-height: 20px;
width: 20px;
font-weight: bold;
float: left;
}

anche se non sono riuscito ad usare 2 colori diversi per i testi ( se eventualmente qualcuno riesce ad aiutarmi ad avere i due colori la grafica sarebbe felicissima)

e cambiando questa riga nel js per posizionare i bottoni dove voglio

Codice:
$("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider'));

con questa

Codice:
$("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#tasti-slide'));

dove dico appunto che i bottoni li voglio dentro al div tasti-slide
 

Discussioni simili