Carrousel Bootstrap est un simple composant JavaScript qui est inclus directement dans le Amorcer. Il peut être utile dans de nombreuses situations de présenter principalement des images et leurs légendes sur votre site Web.

Dans ce guide, je vais vous guider à travers Les bases Pour que vous puissiez l’utiliser de votre côté. Décris le options de configuration possibles et je vais vous montrer comment changer son comportement facilement et faites-le en mode plein écran ou lorsque vous changez l’effet d’animation de la diapositive à l’animation de dissolution.

Ce tutoriel était créé à l’origine pour Bootstrap 3 en 2016.

Maintenant, en 2018, Je l’ai complètement réécrit pour Bootstrap 4.

Si vous devez toujours utiliser la version Bootstrap 3, vous pouvez trouver les fichiers originaux dans le package de téléchargement. Dans cet article, j’ai créé une nouvelle section sur Bootstrap 3 qui décrit les principales différences. Je mentionne également quelques améliorations du carrousel Bootstrap 3.

Démo 1 – Utilisation de base Démo 2 – avec quelques améliorations Télécharger les sources

1. Utilisation de base

Une page simple avec un carrousel bootstrap peut ressembler à cet exemple.

Exemple de carrousel Bootstrap

Jetons un œil au code.

<html>

<head>
    <title>Bootstrap Carousel Guide by Bootstrapious.com</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet" type="text/css">
    <link href="custom.css" rel="stylesheet" type="text/css">
</head>

<body>

    <!-- in a container -->

    <div class="container">

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="https://bootstrapious.com/p/#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="https://bootstrapious.com/p/#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="https://bootstrapious.com/p/#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <img src="https://bootstrapious.com/p/img/carousel1.jpg" class="img-fluid" alt="">
                    <div class="carousel-caption">
                        <h1>Carousel in a container</h1>
                        <p>This is a demo for the Bootstrap Carousel Guide.</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img/carousel2.jpg" class="img-fluid" alt="">
                </div>
                <div class="carousel-item">
                    <img src="img/carousel3.jpg" class="img-fluid" alt="">
                </div>
            </div>

            <!-- Controls -->
            <a class="carousel-control-prev" href="https://bootstrapious.com/p/#carousel-example-generic" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="https://bootstrapious.com/p/#carousel-example-generic" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

        <h1>Some dummy demo content</h1>

        <p class="lead"><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

        <h2>Header Level 2</h2>

        <ol>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
        </ol>

        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
        </blockquote>

        <h3>Header Level 3</h3>

        <ul>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

Passons maintenant en revue le code:

  • Nous contenons la feuille de style Bootstrap et la bibliothèque JavaScript minimisée par Bootstrap, toutes deux issues de MaxCDN dans notre cas
  • Le JS de Bootstrap dépend de jQuery et PopperJS, nous ne devons donc pas oublier de l’inclure également
  • Nous allons mettre le carrousel sur un bootstrap .container. Comme il est censé occuper toute la largeur du conteneur, nous n’avons pas besoin d’utiliser des bootstraps .row Encore .col-* Des classes.

À présent, le carrousel lui-même (Élément principal du carrousel – div.carousel) se compose de 3 parties::

  1. ol.carousel-indicators (navigation de type pagination dans la zone inférieure du carrousel du carrousel)
  2. div.carousel-inner (dans lequel nous plaçons le contenu à présenter)
  3. et deux liens de navigation pour les flèches – a.carousel-control-prev et a.carousel-control-next.
Éléments du carrousel Bootstrap

Élément principal du carrousel

Ajoutez simplement pour dire à Bootstrap de créer un carrousel à partir d’un élément class="carousel" et dans notre cas un identifiant spécifique id="carousel-example-generic", à un <div>.

Remarquerez que Nous pouvons transmettre des options au carrousel via des attributs de données. Dans ce cas on va plus loin data-ride="carousel" Cela indiquera à Bootstrap de lire automatiquement le carrousel. Pour la liste complète des options, Regardez ici.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
...
</div>

Annonces carrousel

Ceci est une partie facultative de la navigation carrousel codée dans <ol class="carousel-indicators">.

Chaque carrousel pousse .carousel-inner en a besoin <li> Entrez ici.

N’oubliez pas d’ajouter data-target Attribut avec l’ID du carrousel et data-slide-to Attribut avec l’index de la diapositive à laquelle il se rapporte (0 représente la première diapositive, 1 la seconde, etc.).

La première <li> devrait aussi avoir class="active".

<li data-target="https://bootstrapious.com/p/#carousel-example-generic" data-slide-to="0" class="active"></li>

Corps du carrousel

Le contenu principal du carrousel s’affiche <div class="carousel-inner">.

Enroulez chacune des feuilles sur un <div class="carousel-item"> et marquez la première entrée avec un .active Classe aussi. La diapositive peut contenir une image ou une image avec une légende.

Pour créer une étiquette, placez simplement un <div class="carousel-caption"> avec un contenu textuel dans la diapositive.

<div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
        <img src="https://bootstrapious.com/p/img/carousel1.jpg" class="img-fluid" alt="">
        <div class="carousel-caption">
            <h1>Carousel in a container</h1>
            <p>This is a demo for the Bootstrap Carousel Guide by <a href="https://bootstrapious.com">Bootstrapious</a>.</p>
        </div>
    </div>
    ...
</div>

Carrousel vérifications suivantes et précédentes

Pour les commandes fléchées suivante et précédente, vous devez placer deux <a> Éléments dans le code de votre carrousel.

Remarquez à nouveau que le href Attribut qui doit contenir votre identifiant de carrousel et qui data-slide Attributs avec soit prev ou alors next Valeurs.

<!-- Controls -->
<a class="carousel-control-prev" href="https://bootstrapious.com/p/#carousel-example-generic" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="https://bootstrapious.com/p/#carousel-example-generic" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

2 options

De la partie précédente de cet article, nous devrions avoir un joli carrousel bootstrap. C’est le moment idéal pour explorer un peu les options possibles.

Les options disponibles pour le carrousel Bootstrap sont:

Nom de famille De l’art défaut la description
intervalle numéro 5000 Le laps de temps entre le parcours automatique d’un élément. S’il est faux, le carrousel ne change pas automatiquement.
Se rompre String | zéro « flotter » Lorsqu’il est réglé sur "hover", continue à parcourir le carrousel mouseenter et continue de faire du vélo sur le carrousel mouseleave. Lorsqu’il est réglé sur nullSi vous survolez le carrousel, il ne s’arrêtera pas.
envelopper Valeur booléenne vrai Si le carrousel doit fonctionner en continu ou avoir des arrêts durs.
clavier Valeur booléenne vrai Indique si le carrousel doit répondre aux événements du clavier.

Les options peuvent être passées via les attributs de données de l’élément carrousel ou via Javascript.

Au Configuration via les attributs de donnéesAjoutez simplement data au nom de l’option et utilisez-le pour le carrousel div.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">
    ...
</div>

Utilisation de JavaScript:

$("https://bootstrapious.com/p/#carousel-example-generic").carousel({
  interval: 3000,
  pause: null
})

3. Modifier l’apparence par défaut

Carrousel plein écran avec étiquettes centrées verticalement

La première des modifications que je veux vous montrer est comment utiliser un carrousel bootstrap pour créer une belle zone d’introduction en plein écran.

CSS

La solution suivante détermine également la hauteur de l’article vh Unités et fonctionne dans tous les navigateurs modernes. Dans le carrousel avec un class="carousel-fullscreen", on met sa diapositive height à 100vh (pleine hauteur) et min-height à 600px (pour avoir suffisamment d’espace pour le texte sur des appareils plus petits).

/* carousel fullscreen */

.carousel-fullscreen .carousel-inner .item {
    height: 100vh; 
    min-height: 600px; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover;
}

/* carousel fullscreen - vertically centered caption*/

.carousel-fullscreen .carousel-caption {
    top: 50%;  
    bottom: auto;
    -webkit-transform: translate(0, -50%); 
    -ms-transform: translate(0, -50%); 
    transform: translate(0, -50%);
}

HTML

Dans notre code HTML, nous devons également modifier un peu le balisage. Au lieu d’utiliser les images en une <img> Jour, nous allons les utiliser comme toile de fond pour la diapositive .carousel-item.

<div id="carousel-example-generic2" class="carousel slide carousel-fade carousel-fullscreen" data-ride="carousel">
    <!-- Indicators -->
    ...

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active" style="background-image: url("https://bootstrapious.com/p/img/carousel1.jpg");">
            <div class="overlay"></div>
            <div class="carousel-caption">
                <h1 class="display-2 font-weight-bold">Bootstrap Carousel Guide</h1>
                <p class="h4 font-weight-light">This is a demo for the <a href="https://bootstrapious.com/p/bootstrap-carousel" class="text-white">Bootstrap Carousel Guide</a> by <a href="https://bootstrapious.com" class="text-white">Bootstrapious.com</a>.</p>
            </div>
        </div>
        <div class="carousel-item" style="background-image: url('img/carousel2.jpg');">
          ...
        </div>
        <div class="carousel-item" style="background-image: url('img/carousel3.jpg');">
            ...
        </div>
    </div>

    <!-- Controls -->
    ...
</div>

Superposition transparente

Parfois, vous devez assombrir l’image pour augmenter le contraste entre le texte et l’image d’arrière-plan. La solution est très simple, nous allons juste en ajouter un de plus <div> au carrousel <div class="item">.

CSS

/* overlay for better readibility of the caption  */

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    transition: all 0.2s ease-out;
}

HTML

<div class="item">
    <div class="overlay"></div>
    <div class="carousel-caption">
        ...
    </div>
</div>

Transition en fondu au lieu de glisser

Pour modifier la transition entre les diapositives en fondu au lieu de diapositive, tout ce que vous avez à faire dans Bootstrap 4 est d’ajouter .carousel-fade Classez à votre carrousel.

La liste complète des classes pour le carrousel de base serait class="carousel slide carousel-fade".

Modifier la durée de la transition

La durée standard d’une transition de diapositive est fixée à 0,6 s. Cela peut être fait très rapidement, en particulier lors de l’utilisation de la transition de dissolution. Ajoutez cette définition au fichier CSS pour ajuster la durée de la transition entre les diapositives. (dans notre cas custom.css)

.carousel .carousel-item {
    transition-duration: 1.5s;
}

Ajoutez un support tactile et glissant au carrousel

L’un des plus gros inconvénients de l’utilisation du carrousel Bootstrap 4 est le manque de prise en charge du balayage et du toucher.

Heureusement, ce n’est pas compliqué d’ajouter ce comportement à l’aide de jQuery.

Ajoutez cet extrait à un fichier JS distinct ou juste dans le pour activer la prise en charge du toucher et du glissement <script></script> Bloquer juste avant la fin </body> Étiqueter.

Cette optimisation est basée sur l’un des Les réponses de SO.

var touchSensitivity = 5;
$(".carousel").on("touchstart", function (event) {
    var xClick = event.originalEvent.touches[0].pageX;
    $(this).one("touchmove", function (event) {
        var xMove = event.originalEvent.touches[0].pageX;
        if (Math.floor(xClick - xMove) > touchSensitivity) {
            $(this).carousel('next');
        } else if (Math.floor(xClick - xMove) < -(touchSensitivity)) {
            $(this).carousel('prev');
        }
    });
    $(".carousel").on("touchend", function () {
        $(this).off("touchmove");
    });
});

démo

Vérifiez ceci en ligne Démo avec toutes ces mises à niveau de carrousel.

Différences entre Bootstrap 4 et Bootstrap 3

La bonne nouvelle est qu’il y a peu de différence dans le HTML des carrousels dans Bootstrap 4 et Bootstrap 3.

  • Article: Article du carrousel (B4) = Article (B3)
  • Dissolve Transition: Vous devez coder vous-même la transition de dissolution dans Bootstrap 3 (voir mon code ci-dessous).
  • Pagination: rectangles (B4) contre cercles (B3)

Effet de fondu entre les diapositives

Dans Bootstrap 3, il n’est pas si facile d’obtenir l’effet de fondu entre les diapositives. Nous devons changer la transition de la transition de transformation standard à une transition d’opacité.

Cette solution a été publiée à l’origine dans ce codepen.

CSS

/* original solution by https://codepen.io/Rowno/pen/Afykb */

.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
    z-index: 2;
}

HTML

Pour utiliser l’effet de fondu, ajoutez simplement class = « carouse-fade » à votre carrousel.

<div id="carousel-example-generic2" class="carousel slide carousel-fade">
   ...
</div>

Découvrez mes autres tutoriels. Vous aimerez peut-être les tutoriels comment créer un formulaire de contact fonctionnel ou alors comment créer Icônes de partage léger pour votre site Web.



Source link

Recent Posts