Carousel verticale bootstrap

carousel verticale bootstrap

Qualche giorno fa mi si è presentata la necessità di creare un carousel verticale che sia anche responsive. La prima cosa a cui ho pensato, è stata quella di utilizzare bootstrap. Per chi non lo conoscesse, bootstrap è un framework HTML, CSS e JS utilissimo per realizzare progetti web responsive.

Bootstrap mette a disposizione diversi esempi già pronti per l’utilizzo, come menù, pagina di login ed anche un carousel. Il carousel messo a disposizione da bootstrap è un classico carousel orizzontale, ma io avevo bisogno di un carousel verticale.

Il primo passo da fare per utilizzare bootstrap è quello di scaricarlo dal proprio sito (ho inserito il link nel primo paragrafo dell’articolo). Una volta scaricato, nel nostro sito dobbiamo includere i file bootstrap.min.css, presente nella cartella css e il file bootstrap.min.js presente nella cartella js e come sempre la libreria js. Quindi nel tag head del sito scriviamo:

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Una volta inclusi i file, ho pensato di modificare il carousel di bootstrap per creare il mio carousel verticale.

Di seguito potete trovare il codice HTML.

<div class="container">
    <div class="row-fluid">
	<div class="span6 offset3">
		<div id="carousel_verticale" class="carousel slide vertical">
			<!-- Carousel items -->
			<div class="carousel-inner">
				<div class="active item">
					<img src="slide1.jpg">
				</div>
				<div class="item">
					<img src="slide2.jpg">
				</div>
				<div class="item">
					<img src="slide3.jpg">
				</div>
			</div>
			<!-- Carousel nav -->
			<a class="carousel-control left" href="#carousel_verticale" data-slide="prev">‹</a>
			<a class="carousel-control right" href="#carousel_verticale" data-slide="next">›</a>
		</div>
	</div>
     </div>
</div>

Una volta inserita la struttura del carousel verticale, inseriamo anche il file css per dargli lo stile.

.vertical .carousel-inner {
  height: 100%;
}
.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s ease-in-out top;
}
.carousel.vertical .active {
  top: 0;
}
.carousel.vertical .next {
  top: 400px;
}
.carousel.vertical .prev {
  top: -400px;
}
.carousel.vertical .next.left,
.carousel.vertical .prev.right {
  top: 0;
}
.carousel.vertical .active.left {
  top: -400px;
}
.carousel.vertical .active.right {
  top: 400px;
}
.carousel.vertical .item {
    left: 0;
}

Ed infine lo script js, che non fa altro che associare la funzione carousel al nostro div con id carousel_verticale.

$('#carousel_verticale').carousel({
  interval: 3000
})

Tutto qui! Abbiamo creato un carousel verticale bootstrap

La funzione carousel di bootstrap accetta diversi parametri, io ho inserito solo interval settato a 3000, cioè che ogni 3 secondi deve passare alla slide successiva. Se non volete lo scorrimento automatico delle slide vi basta impostare a false il parametro interval. Qui c’è il link per visualizzare gli altri parametri che accetta la funzione carousel di bootstrap.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *