Basic tutorial of swiper (12)-HTML Tutorial-php.cn

Basic tutorial of swiper (12)

黄舟

Release： 2017-01-20 15:31:13

Original

1308 people have browsed it

This section describes how to change navigation into a scroll bar style in swiper.

First we build the basic layout of a swiper page.

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

Copy after login

Then add the initialization code to the JS part.

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

Copy after login

You can notice that in this article, the swiper-container of the paging navigation is changed to swiper-scrollbar, and then the navigation is bound during initialization. It can be achieved. Of course, you can turn off the hidden effect of the navigation bar

The above is the content of swiper’s basic tutorial (12). For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!