Basic use of Swiper (ix)

This article ish5eduAgency's officialHTML5 TrainingTutorialsSwiper Tutorialsin this lesson, we introduce the multi-line display of the Swiper page.
 
> The first step, we're going 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-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 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= "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= " Swiper-slide "> Eighth page </div>                <div  class= "Swiper-slide" > Nineth page </div>             </div>            <div class= ' Swiper-pagination ' ></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   //to display multiple rows 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 course

This article is from the "11721999" blog, please be sure to keep this source http://11731999.blog.51cto.com/11721999/1793138

Basic use of Swiper (ix)