Magazine High tech

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

Publié le 03 décembre 2014 par P0k3
[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 !

Retour à La Une de Logo Paperblog

A propos de l’auteur


P0k3 117 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog

Magazines