Basic use of swiper (6)-HTML Tutorial-php.cn

Basic use of swiper (6)

黄舟

Release： 2017-01-20 15:23:50

Original

1206 people have browsed it

This section mainly introduces the centering attribute in swiper.

This centering refers to centering the current page we are browsing. The effect is more obvious when we use group display.
First of all, we need to complete a basic swiper page according to the content of the first section.

   <div class="swiper-wrapper">
                <div class="swiper-slide">第一页</div>
                <div class="swiper-slide">第二页</div>
                <div class="swiper-slide">第三页</div>
                <div class="swiper-slide">第四页</div>
                <div class="swiper-slide">第五页</div>
                <div class="swiper-slide">第六页</div>
                <div class="swiper-slide">第七页</div>
                <div class="swiper-slide">第八页</div>
                <div class="swiper-slide">第九页</div>
                <div class="swiper-slide">第十页</div>
                <div class="swiper-slide">第十一页</div>
                <div class="swiper-slide">第十二页</div>
                <div class="swiper-slide">第十三页</div>
            </div>
        </div>

Copy after login

Then initialize the page. In order to make the effect more obvious, we add group display and page gap to the page. During the test process We can also delete or annotate the group display to see the page effect.

<script>            
var swipre = new Swiper(&#39;.swiper-container&#39;,{                
slidesPerView:4,   //分组显示                
spaceBetween:30    //页面间隙                
centeredSlides:true  //页面居中            
});        
</script>

Copy after login

In this way, the attribute of page centering is added to our project

The above is the basic use of swiper (6). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!