Maison > Article > interface Web > Découvrez les différents effets de carrousel d’images dans Bootstrap dans un seul article

Découvrez les différents effets de carrousel d’images dans Bootstrap dans un seul article

青灯夜游avant: 2021-12-02 19:04:054032parcourir

Cet article vous fera découvrir le carrousel d'images dans Bootstrap et présentera l'utilisation du composant carrousel d'images Carousel. J'espère qu'il sera utile à tout le monde !

1 Composant Carrousel

Carousel (Carousel) est un composant de diaporama utilisé pour faire une boucle entre des éléments, des images ou des diapositives de texte (comme un carrousel).

carousel est un diaporama permettant de mettre en boucle une série de contenu, construit à l'aide de transformations CSS3D et d'un peu de javascript. Il peut gérer une gamme d’images, de texte ou de balises personnalisées. Il inclut également la prise en charge des contrôles et indicateurs précédents/suivants. [Recommandation associée : "Tutoriel bootstrap"]

Dans les navigateurs prenant en charge l'API de visibilité de page, lorsque l'utilisateur ne peut pas voir la page Web (par exemple, l'onglet du navigateur est inactif, la fenêtre du navigateur est réduite, etc.), Le carrousel évitera de glisser.

Le carrousel ne normalise pas automatiquement la taille des diapositives. Par conséquent, vous devrez peut-être utiliser des catégories universelles supplémentaires ou des styles personnalisés pour redimensionner votre contenu de manière appropriée. Bien que les carrousels prennent en charge les contrôles et indicateurs précédent/suivant, ils ne sont pas obligatoires. Peut être ajouté et personnalisé selon les besoins.

2 Exemples de carrousels sous différentes formes

2.1 Carrousel avec uniquement des diapositives

Il s'agit d'un carrousel avec uniquement des diapositives. Veuillez noter la présence de .d-block et .w-50 sur l'image du carrousel pour éviter l'alignement de l'image par défaut du navigateur. Le code suivant change une image toutes les 5 secondes.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>轮播</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
        <div>
        <div class="carousel-item active">
        <img src="../pic/3.jpg" class="d-block w-100" alt="...">
        </div>
        <div>
        <img src="../pic/4.jpg" class="d-block w-100" alt="...">
        </div>
        <div>
        <img src="../pic/6.jpg" class="d-block w-100" alt="...">
        </div>
        </div>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Découvrez les différents effets de carrousel d’images dans Bootstrap dans un seul article

2.2 Apporter les contrôles précédents et suivants

Ajouter les contrôles précédents et suivants. Nous vous recommandons d'utiliser l'élément bouton, mais vous pouvez également utiliser l'élément a avec role="button". Il convient de noter que pour définir la taille et la largeur de l'image, vous devez définir la taille du conteneur du carrousel. Le paramètre d'image doit être w-100 pour remplir le conteneur, sinon le suivant risque de ne pas être visible.

  <div id="carouselExampleControls" class="carousel slide w-50" data-bs-ride="carousel">
        <div class="carousel-inner">
        <div class="carousel-item active">
        <img src="../pic/3.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
        <img src="../pic/4.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
        <img src="../pic/6.jpg" class="d-block w-100" alt="...">
        </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
        </button>
        </div>

Découvrez les différents effets de carrousel d’images dans Bootstrap dans un seul article

Les signes supérieur et inférieur aux deux côtés de l'image sont les contrôles précédent et suivant.

2.3 Avec indicateur

L'indicateur est constitué des trois barres horizontales blanches dans l'image ci-dessous. Cliquez pour passer directement à l'image correspondante.

<div id="carouselExampleIndicators" class="carousel slide w-50" data-bs-ride="carousel">
            <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
            <div class="carousel-item active">
            <img src="../pic/3.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
            <img src="../pic/4.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
            <img src="../pic/6.jpg" class="d-block w-100" alt="...">
            </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
            </button>
            </div>

Découvrez les différents effets de carrousel d’images dans Bootstrap dans un seul article

2.4 Avec sous-titres

Utilisez la légende du carrousel pour ajouter des sous-titres aux diapositives dans n'importe quel élément du carrousel. Vous pouvez éventuellement les masquer facilement sur des fenêtres plus petites à l'aide de la classe générique d'affichage, comme indiqué ci-dessous, qui sera initialement masquée avec d-none et réaffichée sur les appareils de taille moyenne à l'aide de d-md-block.

  <div id="carouselExampleCaptions" class="carousel slide w-50" data-bs-ride="carousel">
                <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                <div class="carousel-item active">
                <img src="../pic/3.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>第一个幻灯片</h5>
                  <p>一枝红艳露凝香，云雨巫山枉断肠。<br>——唐代李白的《清平调·其二》</p>
                </div>
                </div>
                <div class="carousel-item">
                <img src="../pic/4.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>第二个幻灯片</h5>
                  <p>南国有佳人，容华若桃李。<br>——汉曹植的《杂诗七首·其四》</p>
                </div>
                </div>
                <div class="carousel-item">
                <img src="../pic/6.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>第三个幻灯片</h5>
                  <p>云想衣裳花想容，春风拂槛露华浓。<br>
                      ——唐代李白的《清平调·其一》</p>
                </div>
                </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
                </button>
                </div>

Découvrez les différents effets de carrousel d’images dans Bootstrap dans un seul article

2.5 Fondu

Ajoutez un fondu de carrousel au conteneur du carrousel pour remplacer l'effet d'animation coulissant par un fondu. Cette partie ne sera pas démontrée, y compris les deux dernières qui sont toutes une question de paramètres.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">

2.6 Définir l'intervalle de temps

Ajoutez data-bs-interval="" sur l'élément du carrousel pour modifier le temps de retard de la boucle automatique vers l'élément suivant. Ce paramètre doit être défini dans chaque élément d'éveil. L'unité de temps est en millisecondes. Si l'intervalle de réglage est de 5 secondes, il sera de 5 000. Vous trouverez ci-dessous l'intervalle de réglage de 10 secondes.

<div class="carousel-item active" data-bs-interval="10000">

2.7 Désactiver la commutation tactile

Le composant carrousel prend en charge le balayage gauche/droite sur les appareils à écran tactile pour se déplacer entre les diapositives. Cela peut être désactivé à l'aide de l'attribut data-bs-touch. L'exemple ci-dessous n'inclut ni l'attribut data-bs-ride, mais contient data-bs-interval="false" afin qu'il ne soit pas lu automatiquement.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">

2.8 Variante sombre

Ajoutez un carrousel-dark sur le carrousel pour obtenir des commandes, des indicateurs et des sous-titres sombres. Les contrôles ont été inversés par rapport à leur remplissage blanc par défaut via le filtre de propriété CSS. Les sous-titres et les contrôles ont des variables supplémentaires pour personnaliser la couleur et la couleur d'arrière-plan.

Nous prenons l'exemple de 22.2.4 et ajoutons carrousel-dark comme exemple pour vérifier l'effet

<div id="carouselExampleCaptions" class="carousel carousel-dark slide w-50" data-bs-ride="carousel">

Découvrez les différents effets de carrousel d’images dans Bootstrap dans un seul article

Parce que la couleur de l'image sélectionnée elle-même est un peu sombre, donc l'effet n'est pas bon avec cela. S'il s'agit d'une image aux couleurs vives, elle sera meilleure. Vous pouvez l'essayer.

Pour plus de connaissances sur le bootstrap, veuillez visiter : Tutoriel de base du bootstrap ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css bootstrap Filter 循环 display viewport background

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Une explication détaillée de la façon d'utiliser le composant Card dans BootstrapArticle suivant：Une explication détaillée de la façon d'utiliser le composant Card dans Bootstrap

Articles Liés

Voir plus