Basic tutorial of swiper (12)

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="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="Basic tutorial of swiper (12)" ></div>
                <div class="swiper-slide">H5EDU 2<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="Basic tutorial of swiper (12)" ></div>
                <div class="swiper-slide">H5EDU 3<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="Basic tutorial of swiper (12)" ></div>
                <div class="swiper-slide">H5EDU 4<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="Basic tutorial of swiper (12)" ></div>
                <div class="swiper-slide">H5EDU 5<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="Basic tutorial of swiper (12)" ></div>
                <div class="swiper-slide">H5EDU 6<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="Basic tutorial of swiper (12)" ></div>
                <div class="swiper-slide">H5EDU 7<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="Basic tutorial of swiper (12)" ></div>
                <div class="swiper-slide">H5EDU 8<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="Basic tutorial of swiper (12)" ></div>
                <div class="swiper-slide">H5EDU 9<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   alt="Basic tutorial of swiper (12)" ></div>
            </div>
            <div class="swiper-scrollbar"></div>
        </div>

Then add the initialization code to the JS part.

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

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