Grundlegendes Tutorial von Swiper (12)

In diesem Abschnitt erfahren Sie, wie Sie die Navigation im Swiper in den Bildlaufleistenstil ändern.

Zuerst erstellen wir das Grundlayout einer Swiper-Seite.

<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>

Fügen Sie dann den Initialisierungscode zum JS-Teil hinzu.

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

Sie können feststellen, dass in diesem Artikel der Swiper-Container der Seitennavigation in Swiper-Scrollbar geändert wird und die Navigation dann während der Initialisierung gebunden wird. Es kann erreicht werden. Natürlich können Sie den Ausblendeffekt der Navigationsleiste deaktivieren

Das Obige ist der Inhalt des grundlegenden Tutorials von Swiper (12). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (). www.php.cn)!