swiper的基礎教程（十二）-html教學-PHP中文網

swiper的基礎教程（十二）

黄舟

發布： 2017-01-20 15:31:13

原創

1310 人瀏覽過

本節內容介紹swiper當中如何將導航變成捲軸樣式。

首先我們建立一個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>

登入後複製

然後到JS部分加入初始化程式碼。

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

登入後複製

可以注意到在本篇當中將分頁導航的swiper-container改為swiper-scrollbar，然後在初始化當中綁定導航。就可以實現了。當然，可以關閉導航條的隱藏效果

以上就是swiper的基礎教程（十二）的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！