Maison > interface Web > tutoriel HTML > Tutoriel de base du swiper (12)

Tutoriel de base du swiper (12)

黄舟
Libérer: 2017-01-20 15:31:13
original
1307 Les gens l'ont consulté

Cette section décrit comment modifier la navigation en style de barre de défilement dans le swiper.

Nous construisons d’abord la mise en page de base d’une page swiper.

<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 class="swiper-slide">H5EDU 7<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 8<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 9<img src="logo.png"></div>
            </div>
            <div class="swiper-scrollbar"></div>
        </div>
Copier après la connexion

Ajoutez ensuite le code d'initialisation dans la partie JS.

var swiper = new Swiper(&#39;.swiper-container&#39;,{
                spaceBetween:30,
                grabCursor:true,
                slidesPerView:3,
                centeredSlides:true,
                scrollbar:&#39;.swiper-scrollbar&#39;, //绑定分页导航
                scrollbarHide:true  //开启导航在不活动时的隐藏
            });
Copier après la connexion

Vous pouvez remarquer que dans cet article, le conteneur swiper de la navigation de pagination est remplacé par swiper-scrollbar, puis la navigation est liée lors de l'initialisation. Cela peut être réalisé. Bien sûr, vous pouvez désactiver l'effet de masquage de la barre de navigation

Ce qui précède est le contenu du didacticiel de base de swiper (12). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (). m.sbmmt.com) !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal