Maison >interface Web >tutoriel HTML >Utilisation de base du swiper (14)

Utilisation de base du swiper (14)

黄舟
黄舟original
2017-01-20 15:38:541270parcourir

Dans ce contenu, nous présenterons comment activer le mode boucle dans la page swiper.
Tout d'abord, construisons une disposition de base du swiper en utilisant les compétences accumulées en quatorze... ou treize séances. Et définissez les styles CSS selon vos besoins.

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

Ensuite, allez sur js pour initialiser la page, plus notre attribut de boucle (loop : true

var swiper = new Swiper(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                paginationClickable:true,
                nextButton:&#39;.swiper-button-next&#39;,
                prevButton:&#39;.swiper-button-prev&#39;,
                slidesPerView:1,
                spaceBetween:30,
                loop:true  //开启循环属性
            });

Une fois terminé, nous pouvons tourner). des pages tout le temps, et vous pouvez jouer pendant trois jours et trois nuits sans vous fatiguer !

Ce qui précède est l'utilisation de base de swiper (14). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !


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