Maison >interface Web >js tutoriel >Comment implémenter un graphique carrousel dans bootstrap ? Introduction à la méthode de mise en œuvre du diagramme carrousel bootstrap

Comment implémenter un graphique carrousel dans bootstrap ? Introduction à la méthode de mise en œuvre du diagramme carrousel bootstrap

不言original: 2018-10-19 10:23:254950parcourir

Les images de carrousel sont indispensables sur chaque site Web, et elles constituent fondamentalement l'endroit le plus visible sur la page d'accueil du site Web. Il existe de nombreuses façons de mettre en œuvre des images de carrousel. L'article d'aujourd'hui vous les présentera. 🎜>Méthode de mise en œuvre du diagramme carrousel bootstrapLes amis intéressés peuvent y jeter un œil.

Jetons d'abord un coup d'œil à un plug-in :

Le plug-in Bootstrap Carousel (Carousel)

Le plug-in Bootstrap Carousel (Carousel) est un plug-in flexible et réactif. module complémentaire au site Slider way. Au-delà de cela, le contenu est suffisamment flexible et peut être des images, des iframes, des vidéos ou tout autre type de contenu que vous souhaitez placer.

Donc, pour implémenter le graphique carrousel bootstrap, nous devons utiliser le plug-in Bootstrap Carousel. Jetons un coup d'œil à un exemple spécifique de

implémentation de graphique carrousel bootstrap :

Remarque : Si vous souhaitez référencer les fonctionnalités de ce plug-in séparément, vous devez référencer carousel.js. Vous pouvez également référencer bootstrap.js ou une version réduite de bootstrap.min.js.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap轮播图</title>
    <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div> 
</body>
</html>

Cet article se termine ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne

tutoriel bootstrap

sur le site Web php chinois ! ! !

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Qu'est-ce qu'un composant de validation de données de réaction personnalisé dans js (explication détaillée)Article suivant：Qu'est-ce qu'un composant de validation de données de réaction personnalisé dans js (explication détaillée)

Articles Liés

Voir plus