Tutoriel de base du swiper (12)

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>

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

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

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 (). www.php.cn) !