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

Grace à 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）指標(biāo) -->
    <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）項(xiàng)目 -->
    <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）導(dǎo)航 -->
    <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