This article is the official HTML5 training course for h5edu Agencies Swiper Tutorial This lesson we introduce the multi-line display of the Swiper page.
The first step is to create a swiper base page. But this time we're going to create some more slide.
<div class= "Swiper-container" > <div class= "swiper-wrapper" > <div class= "swiper-sl IDE > First page </div> <div class= "swiper-slide" > second page </div> <div class= "swipe R-slide "> Third page </div> <div class=" swiper-slide "> Fourth page </div> <div class=" s Wiper-slide "> Fifth page </div> <div class=" Swiper-slide "> Sixth page </div> <div Clas s= "Swiper-slide" > Seventh page </div> <div class= "swiper-slide" > eighth page </div> <div class= "Swiper-slide" > Nineth page </div> <div class= "swiper-slide" > first page </div> < Div class= "Swiper-slide" > second page </div> <div class= "swiper-slide" > third page </div> <div class= "Swiper-slide" > Fourth page </div> <div class= "Swiper-slide" > Fifth page </div> <div class= "swipeR-slide "> Sixth page </div> <div class=" swiper-slide "> Seventh page </div> <div class=" s Wiper-slide "> Eighth page </div> <div class=" swiper-slide "> Nineth page </div> <div clas s= "Swiper-slide" > First page </div> <div class= "swiper-slide" > second page </div> <div class= "Swiper-slide" > Third page </div> <div class= "swiper-slide" > Fourth page </div> < Div class= "Swiper-slide" > Fifth page </div> <div class= "Swiper-slide" > Sixth page </div> <div class= "swiper-slide" > Seventh page </div> <div class= "swiper-slide" > eighth page </div> <div class= "swiper-slide" > Nineth page </div> </div> <div class= ' swiper-pagination ' &G T;</div> </div>
Then we go to JS and initialize our swiper.
<script> var swiper = new Swiper ('. Swiper-container ', { pagination: '. Swiper-pagination ', Paginationclickable:true, spacebetween:10, slidesperview:3, slidespercolumn:3 // Display multiple lines of swiper pages as: 3 rows }); </script>
Then you can see that we haven't changed much this time, the implementation style still adds an attribute to the initialization---------Slidepercolumn
This property is generally used in combination with group display. It is also better to add gaps between pages
Click to enter Swiper Intensive tutorial: http://www.h5edu.cn/index.php?c=index&a=step&lessonid=893
Basic use of Swiper (ix)