Heim > Web-Frontend > HTML-Tutorial > Grundlegendes Tutorial von Swiper (12)

Grundlegendes Tutorial von Swiper (12)

黄舟
Freigeben: 2017-01-20 15:31:13
Original
1306 Leute haben es durchsucht

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>
Nach dem Login kopieren

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

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

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 (). m.sbmmt.com)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage