Slide show con pager e bullets utilizzando jQuery e il plug-in Cycle

Precedente Successiva Torna all'elenco Chiudi

Slide show con il plugin Cycle e jQuery

Caratteristiche dello slide show:

  • bullets con effetto rollover
  • captions
  • foto in dimensioni differenti centrate orizzontalmente

 

Caption della prima slide

Caption della seconda slide

Caption della quinta slide

 

Elementi grafici di Fireworks

 

Codice CSS

      #slideshow {
         width: 400px;
         height: 440px;
         overflow: hidden;
         margin-top: 0px;
         margin-right: auto;
         margin-bottom: 0px;
         margin-left: auto;
         padding: 0px;
      }
      
      .slide {
         width: 400px;
         height: 440px;
         text-align: center;
      }
      
      
      #navslideshow {
         width: 400px;
         margin-right: auto;
         margin-left: auto;
         height: 20px;
         text-align: center;
      }
      
      #navslideshow a {
          display:inline-block;
          width: 20px;
          height: 20px;
          margin-right: 5px;
          background:url(Immagini/bullet_off.png) no-repeat;
      }
      
      #navslideshow a:hover {
          background:url(Immagini/bullet_hover.png) no-repeat;
      }
      
      #navslideshow a:last-child {
          margin-right: 0px;
      }
      
      #navslideshow a.activeSlide {
          background:url(Immagini/bullet_on.png) no-repeat;
      }
      

Codice JavaScript

      $(document).ready(function() {
         $('#slideshow').cycle({
            fx:		'fade',	// Dissolvenza
            speed:    1000,	// Velocità dell'animazione
            timeout:  2000,	// Tempo di permanenza di una slide
            pause:       1,	// Se 1 mette in pausa quando il mouse è sopra lo slide show, altrimenti 0
            startingSlide: 0,	// Parte dalla prima slide
            pager:	'#navslideshow',	// Crea la lista dei link per passare da una slide all'altra
            pagerAnchorBuilder: function(index, el) {
               return '';	// Rimuove il numero dal pager
            }
         });
      });
      

Codice Html

<div id="slideshow">
<div class="slide"> <img src="Foto/slide_01.jpg" /> <p>Caption della prima slide</p> </div> <div class="slide"> <img src="Foto/slide_02.jpg" /> <p>Caption della seconda slide</p> </div> <div class="slide"> <img src="Foto/slide_03.jpg" /> </div> <div class="slide"> <img src="Foto/slide_04.jpg" /> </div> <div class="slide"> <img src="Foto/slide_05.jpg" /> <p>Caption della quinta slide</p> </div>
</div>
<div id="navslideshow"></div>

 

Matteo Varisco
Via Pardini, 138
54038 - Montignoso (MS)
Località Cinquale - Italy
P.IVA 01027000452
C.F. VRSMTT71R16F704B
Privacy e Cookies
Preferenze Cookie