jQuery: slideshow di prodotti con Slides

Slides è un plugin jQuery per gestire slideshow che dimostra di possedere un'ampia gamma di effetti e di opzioni. Con questo plugin possiamo ad esempio creare uno slideshow di prodotti con relative miniature. Vediamo come.

Ecco la nostra struttura HTML:


<div id="container">
		<div id="products_example">
			<div id="products">
				<div class="slides_container">
					<a href="#"><img src="img/1144953-3-2x.jpg" width="366" alt="1144953 3 2x"></a>
					<a href="#"><img src="img/1144953-1-2x.jpg" width="366" alt="1144953 1 2x"></a>
					<a href="#"><img src="img/1144953-2-2x.jpg" width="366" alt="1144953 2 2x"></a>					
					<a href="#"><img src="img/1144953-4-2x.jpg" width="366" alt="1144953 4 2x"></a>
					<a href="#"><img src="img/1144953-5-2x.jpg" width="366" alt="1144953 5 2x"></a>
					<a href="#"><img src="img/1144953-6-2x.jpg" width="366" alt="1144953 6 2x"></a>
					<a href="#"><img src="img/1144953-p-2x.jpg" width="366" alt="1144953 P 2x"></a>
				</div>
				<ul class="pagination">
					<li><a href="#"><img src="img/1144953-3-2x.jpg" width="55" alt="1144953 3 2x"></a></li>
					<li><a href="#"><img src="img/1144953-1-2x.jpg" width="55" alt="1144953 1 2x"></a></li>
					<li><a href="#"><img src="img/1144953-2-2x.jpg" width="55" alt="1144953 2 2x"></a></li>
					<li><a href="#"><img src="img/1144953-4-2x.jpg" width="55" alt="1144953 4 2x"></a></li>
					<li><a href="#"><img src="img/1144953-5-2x.jpg" width="55" alt="1144953 5 2x"></a></li>
					<li><a href="#"><img src="img/1144953-6-2x.jpg" width="55" alt="1144953 6 2x"></a></li>
					<li><a href="#"><img src="img/1144953-p-2x.jpg" width="55" alt="1144953 P 2x"></a></li>
				</ul>
			</div>
		</div>
</div>

Abbiamo due elementi: slides_container che contiene le immagini a dimensione normale e pagination che contiene le loro miniature cliccabili.

Creare uno slideshow con Slides richiede solo il seguente codice:


$(function(){
    $('#products').slides({
		preload: true,
		preloadImage: 'img/loading.gif',
		effect: 'slide, fade',
		crossfade: true,
		slideSpeed: 350,
		fadeSpeed: 500,
		generateNextPrev: true,
		generatePagination: false
	});
});

Fate riferimento alla documentazione sul sito per ulteriori informazioni. Potete visionare l'esempio finale in questa pagina.

Torna su