Swiper Basic use (eight)

This article ish5eduAgency's officialHTML5 TrainingTutorialsSwiper Tutorialsin this lesson we introduce the free mode of the Swiper page.
 
> The first step, we're going to create a swiper base page.

<div class= "Swiper-container" >             <div class= "Swiper-wrapper" >                 <div class= "Swiper-slide" >h5edu 1</div>                 <div class= "Swiper-slide" >h5edu 2</div>                 <div class= " Swiper-slide ">h5edu 3</div>                 <div class= "Swiper-slide" >H5EDU 4 </div>                 <div class= "Swiper-slide" >h5edu 5</div>                 <div class= "Swiper-slide ">h5edu 6</div>         "Logo.png"         <div class= "Swiper-slide" >H5EDU 7</div>                 <div class= "Swiper-slide" >h5edu 8</div>                 <div  class= "Swiper-slide" >h5edu 9</div>                 <div class= "Swiper-slide" >H5EDU  10</div>            </ Div>            <div class= " Swiper-pagination "></div>        </div>

Then we're going to add the properties of our free mode to the initialization

<script>            var swiper =  new swiper ('. Swiper-container ',{                 pagination: '. Swiper-pagination ',                 paginationClickable:true,                 slidesPerView:3,                 spaceBetween:30,                 freemode:true    / /free mode open             });         </script>

After the implementation we come to see the effect, free mode is to be able to turn the page position in any position to stop. No longer restricted to the page

Click to enter Swiper Intensive tutorial

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

Swiper Basic use (eight)