Graphique carrousel réactif de développement réactif H5

Carrousel

Carrousel réactif

Les images de carrousel sont un excellent outil fonction d'affichage des pages. Mais si vous souhaitez utiliser Js et jq, c'est plus gênant. Nous avons appris à utiliser le plug-in bootstrap pour créer facilement des images de carrousel à l'aide de styles intégrés.

Nous créons d'abord le contenu et les indicateurs du graphique d'enregistrement

<ol>
<li></li>
<li></li>
<li></li>
</ol>

Partie contenu

<div>
        <div >
            <img src="https://img.php.cn/upload/course/000/000/004/58195a76b3e4e324.jpg" alt="第一张">
        </div>
        <div>
            <img src="https://img.php.cn/upload/course/000/000/004/58195a9240209277.jpg" alt="第二张">
        </div>
        <div >
            <img src="https://img.php.cn/upload/course/000/000/004/58195abe6d829108.jpg"  alt="第三章">
        </div>
    </div>

Navigation carrousel

Ensuite, nous écrivons pour les trois parties

<a  href="#"></a>
<a  href="#"></a>

Utilisation

Grâce à l'attribut data : La position du carrousel peut être facilement contrôlée à l'aide de l'attribut data.

L'attribut data-slide accepte les mots-clés prev ou next, qui sont utilisés pour changer la position de la diapositive par rapport à la position actuelle. Utilisez data-slide-to pour transmettre un index de diapositive brut au carrousel, data-slide-to="2" déplacera le curseur vers un index spécifique, en comptant à partir de 0.

L'attribut data-ride="carousel" est utilisé pour marquer le carrousel pour démarrer l'animation lorsque la page est chargée.

Ceci complète notre graphique carrousel

<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" style="background: #E2DACF">
            <img src="https://img.php.cn/upload/course/000/000/004/58195a76b3e4e324.jpg" alt="第一张">
        </div>
        <div class="item" style="background: #000000">
            <img src="https://img.php.cn/upload/course/000/000/004/58195a9240209277.jpg" alt="第二张">
        </div>
        <div class="item" style="background: #FEDF85">
            <img src="https://img.php.cn/upload/course/000/000/004/58195abe6d829108.jpg"  alt="第三章">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel"
       data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel"
       data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
</div>

Difficultés de ce chapitre

1. Comment utiliser bootstrap pour compléter le graphique carrousel
   

2. Présentation et configuration de JS