Un menu con effetto Carousel

In questo articolo, spiego come creare un semplice menu con effetto Carousel, da aggiungere al nostro sito web.

Faremo uso del plugin jQuery consultabile a questo indirizzo: OWLCarousel.

Il menu che andremo a creare dovrà essere visualizzato nella nostra home page, e visualizzaerà un immagine alla volta.
Potremo scorrere le immagini mediante effetto drop, o attraverso appositi pulsanti.

Partiamo subito con lo scaricare dall’indirizzo sopra riportato, il plugin OWLCarousel.
Fatto ciò creiamo la nostra struttura di pagina html:

<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
		<script src="../owl-carousel/owl.carousel.js"></script>
		<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
		<link href="../owl-carousel/owl.theme.css" rel="stylesheet">

		<script type="text/javascript">
		$(document).ready(function(){
		});</script>

		<style>

		</style>
		<title>Menu effetto Carousel</title>

	</head>
	<body>
	<div id="demo">
		<div class="container">

		</div>
	</div>
	</body>
</html>

Aggiungiamo quindi il div che conterrà il menu assegnandogli id owl-demo.
Al suo interno, per ogni immagine che il menu dovrà caricare, creeremo un div di classe item-carousel con il relativo tag img.


<div id="owl-demo" class="owl-carousel owl-theme">
			  <div class="item"><img class="item-carousel" src="assets/1.jpg" alt="Image 1"></div>
			  <div class="item"><img class="item-carousel" src="assets/2.jpg" alt="Image 2"></div>
			  <div class="item"><img class="item-carousel" src="assets/3.jpg" alt="Image 3"></div>
			</div>

A questo punto non ci resta che creare gli stili css da assegnare agli elementi.
Lo scopo è visualizzare il menu al centro pagina, ed ognuna delle voci dovrà avere una larghezza fissa di 960px.


#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}

.container{
width: 1170px;
height:auto;
margin: 0 auto;
}

#demo{
display: block;
height:360px;
}

.item-carousel{
width: 1170px;
height:auto;
}

A questo punto mancherà solamente l’inizializzazione del plugin OWLCarousel. Per far ciò dobbiamo indicargli quale è il div che contiene la struttura di menu da caricare.

Caricheremo il plugin con le seguenti opzioni:

  • navigation chiedo al plugin di mostrare i pulsanti avanti e indietro
  • slideSpeed indico al plugin la velocità di slide in millisecondi
  • paginationSpeed indico al plugin la velocità di paginazione in millisecondi
  • singleItem indico al plugin di visualizzare un immagine alla volta

All’interno del tag script andiamo quindi a scrivere:


  // indico di caricare il plugin nel div con id owl-demo
  $("#owl-demo").owlCarousel({

      navigation : true,
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true

  });
 

Possiamo provare tutte le altre opzioni consultandole a questo indirizzo: Opzioni.

A questo punto, se avremo scritto tutto correttamente, avremo il nostro esempio funzionante, come mostrato nell’immagine:

carouselPossiamo scaricare in alternativa l’esempio al link seguente, che apparirà se cliccherai su uno dei pulsanti social di seguito:

[like_to_read]http://www.michelepierri.it/examples/menu-carousel/home.html

Ti Ringrazio![/like_to_read]

 

 

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell’universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.