jQuery: creare un plugin per uno slideshow di contenuti

Possiamo creare facilmente un plugin jQuery per gestire uno slideshow di contenuti. Vogliamo non solo creare un effetto di scorrimento gestito da due pulsanti, ma anche aggiungere un'animazione su un particolare elemento contenuto in ciascuna slide. Vediamo i dettagli dell'implementazione.

Partiamo dalla seguente struttura HTML:

<div id="slider">

	<div id="slider-wrapper">
	
		<div class="slide">
		
			<h2>Slide 1</h2>
			
			<div class="animated">Test</div>
		
		</div>
		
	    <!-- altre slide -->
	
	</div>

</div>

<div id="controls">
	<a href="#" id="previous">&laquo;</a>
	<a href="#" id="next">&raquo;</a>
</div>

Usiamo i seguenti stili CSS, notando come l'elemento con classe animated venga inizialmente nascosto:

#slider {
	width: 500px;
	height: 400px;
	position: relative;
	overflow: hidden;
	clear: left;
	margin: 0 auto;
}

#slider-wrapper {
	width: 2500px;
	height: 400px;
	position: relative;
}

div.slide {
	background: #ccc;
	width: 500px;
	height: 400px;
	position: relative;
	float: left;
}

div.slide h2 {
	height: 100%;
	line-height: 400px;
	font-size: 2em;
	text-transform: uppercase;
	color: #4c4c4c;
	text-align: center;
}

div.slide div.animated {
	width: 100%;
	height: 100px;
	background: #777;
	color: #fff;
	text-align: center;
	line-height: 100px;
	text-transform: uppercase;
	font-size: 2em;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

#controls a {
	text-decoration: none;
	font-size: 3em;
	color: #c30;
	padding-right: 5px;
}

#controls {
	width: 500px;
	margin: 0.5em auto;
	text-align: center;
}

Ora dobbiamo creare il plugin jQuery. Iniziamo definendo le opzioni predefinite:

(function($) {

  $.fn.contentSlider = function(options) {
  
    var that = this;
  
    options = $.extend({
      previous: $('#previous'),
      next: $('#next'),
      animated: $('div.animated', that),
      slide: $('div.slide', that),
      speed: 'slow',
      wrapper: $('#slider-wrapper', that)
    }, options);
    
    
    //...
    
    
   };
   
})(jQuery);

Quindi definiamo un metodo privato che reperisce gli offset delle slide e li memorizza in un array:

var getSlidePositions = function() {
    
      var positions = [];
      
      options.slide.each(function(index) {
      
        var $slide = $(this);
        var left = $slide.position().left;
        
        positions[index] = left;
      
      
      
      });
    
      return positions;
};

Poi creiamo un indice progressivo da usare per reperire le voci dell'array di offset e un limite costituito dal numero di slide presenti:

var slideIndex = 0;
var size = options.slide.length;

A questo punto dobbiamo associare un evento click a ciascun bottone che andrà ad incrementare o decrementare il nostro indice. Usando tale indice facciamo scorrere lo slideshow e selezioniamo l'elemento animated da animare con un effetto di scorrimento dall'alto verso il basso. Quando l'indice raggiunge il limite, tutti gli elementi animati devono essere nascosti e l'indice reimpostato a 0:

return that.each(function() {
    
      var pos = getSlidePositions();
    
    
      options.previous.click(function(event) {
      
      
      
        if(slideIndex > 0) {
    
    
           slideIndex--;
      
         } else {
    
    
          slideIndex = size;
          slideIndex--;
    
    
         }
         
         options.slide.eq(slideIndex).
         find('div.animated').hide();

        
        options.wrapper.animate({
          left: - pos[slideIndex]
        }, options.speed, function() {
        
          options.slide.eq(slideIndex).
          find('div.animated').
          slideDown(options.speed);
        
        
        });
        
        
        
        event.preventDefault();
      
      });
      
      options.next.click(function(event) {
      
        
        slideIndex++;
        
        if(slideIndex == size) {
    
			slideIndex = 0;
    
    
		}
		
		options.slide.eq(slideIndex).
         find('div.animated').hide();
       
               
      
        
        options.wrapper.animate({
          left: - pos[slideIndex]
        }, options.speed, function() {
        
          options.slide.eq(slideIndex).
          find('div.animated').
          slideDown(options.speed);
        
        
        
        });

        
        event.preventDefault();
      
      });
    

    
    
    
    
});

Usiamo il plugin in questo modo:

$(function() {

  $('#slider').contentSlider();

});

Potete visionare l'esempio finale in questa pagina.