twitter-bootstrap => Carrousels

Remarques

Pour plus d'informations, consultez la documentation officielle à l' adresse http://getbootstrap.com/javascript/#carousel , d'où proviennent les exemples et les informations de base sur l'utilisation de HTML et de Javascript.

Il convient de noter que les carrousels ne fonctionnent pas correctement dans IE 9 et les versions antérieures en raison de l’utilisation de transitions / animations CSS3.

Utilisation HTML de base

Un carrousel Bootstrap est un composant Bootstrap qui crée un diaporama qui fait défiler les éléments du carrousel.

Voici un exemple d'utilisation basique de HTML:

<div id="carousel-example-generic" class="carousel slide" 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 class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </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>

Utilisation et initialisation Javascript de base

Les composants du carrousel peuvent être instanciés via jQuery avec la fonction $('.carousel').carousel(options) , où $('.carousel') est une référence de niveau supérieur au carrousel spécifique et options un objet Javascript spécifiant le carrousel attributs par défaut.

L'objet options permet de définir plusieurs propriétés qui affecteront le comportement du carrousel. Ces propriétés sont définies en tant que telles:

La propriété interval accepte un type de number Javascript qui permet à un utilisateur de définir la durée pendant laquelle le carrousel affiche une diapositive de carrousel donnée. Si la valeur booléenne false est spécifiée, le carrousel ne fonctionnera pas automatiquement.
La propriété pause accepte un type de string Javascript qui active le comportement lorsque le cycle automatique du carrousel est suspendu lorsque la souris de l'utilisateur entre dans le carrousel. La valeur par défaut (et unique) acceptée est "hover".
La propriété wrap accepte un type de boolean Javascript qui permet à un utilisateur de définir s'il souhaite ou non que le carrousel effectue un cycle continu sans s'arrêter sur une diapositive donnée.
La propriété keyboard accepte un type de boolean Javascript qui permet à un utilisateur de définir s'il veut ou non que le carrousel réponde aux événements du clavier.

Voici un exemple d'utilisation de Javascript de base:

$('#carCarousel').carousel({ interval: 2500, pause: "hover", wrap: false, keyboard: true });

Comme pour les autres composants Bootstrap, les options du carrousel peuvent également être spécifiées en HTML via des attributs de données.

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

twitter-bootstrap
Carrousels

Recherche…

Remarques

Utilisation HTML de base

Utilisation et initialisation Javascript de base