[Bootstrap] Comment créer un slide vertical avec le carousel ?

Soyez sociable ! Partagez :

Bootstrap est l'un des frameworks CSS/html/JS le plus utilisé par les développeur pour créer rapidement des sites web (souvent utilisé pour les espaces administrations).

Je l'utilise énormément au travail pour certaines fonctionnalités que l'on retrouve régulièrement dans les sites et notamment le carousel.

Seulement, le carousel de bootstrap fait défiler les slides horizontalement. Voici un petit bout de code vous permettant de faire défiler vos slides verticalement avec boostrap (haut en bas).

Comment faire défiler les slides du carousel bootstrap verticalement ?

Ajouter dans un premier temps la class vertical à votre carousel :

<div id="carousel-example-generic" class="carousel slide vertical" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
    </div>
    <div class="item">
      <img src="..." alt="...">
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Puis ajoutez ce bout de code CSS après avoir intégré bootstrap.

.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;
}

.carousel.vertical .carousel-control {
    width: 100%;
    bottom: inherit;
    top: inherit;
}

.carousel.vertical .carousel-control.left {
    top: 0;
}

Vous devriez ainsi obtenir un slide bootstrap vertical.

Soyez Sociable ! Partagez !