[JS plugin] Swiper: Powerful Touch sliding & full Screen scrolling plugin

about Swiper

Original address: http://www.swiper.com.cn/
Swiper is a free and lightweight JS framework for mobile device touch sliders that uses hardware to accelerate transitions (if the device supports them). Mainly used in mobile-side web sites, mobile Web apps,native apps and hybrid apps. Designed primarily for iOS, while also having a good user experience with Android and WP8 Systems, Swiper no longer fully supports the PC side from 3.0. Therefore, if you want to be compatible with more browsers on your PC, you can choose swiper2.x (or even support IE7).

Click here to view example demo

Instructions for use: First, download the source code

Download the source code at the official website: http://www.swiper.com.cn/download/index.html
Only need to download swiper.min.js, SWIPER.MIN.CSS can be used, if you need to use jquery will be downloaded separately , build the Web page, the introduction of relevant documents

1, the new HTML page, if it is moving the end to see, you need to insert a viewport in the page description:

<meta name= "viewport" content= "Width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, User-scalable=no ">

2, the introduction of SWIPER.MIN.CSS files, the introduction of swiper.min.js files.

<link href= "Http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel= "stylesheet" >
<script src= " Http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.min.js "></script>

three, write the HTML structure that you want to divide several screens, and match the style

1, write in the page you want to divide a few screen HTML code, and put them all in a layer, suppose you want to divide 3 screen, as follows:

<div class= "Swiper-container" >
    <div class= "Swiper-wrapper" >
        <div class= "Swiper-slide p1" >slide 1</div>
        <div class= "swiper-slide p2" >slide 2</div> <div class=
        "Swiper-slide P3 ">slide 3</div>
    </div>

    <!--If you need a pager-->
    <div class=" Swiper-pagination "> </div>

    <!--If you need navigation buttons-->
    <div class= "Swiper-button-prev" ></div>
    <div class= "Swiper-button-next" ></div>

    <!--If scroll bars are required-->
    <div class= "Swiper-scrollbar" > </div>
</div>

2, with the style:

<style type= "Text/css" >
html,body {width:100%; height:100%;}//* This line is set to achieve a single layer full screen display */
. Swiper-container { width:100%; height:100%;} /* This line of settings to achieve a single layer full screen display *
/. p1 {background-color: #E13437;}/*P1 Layer Background color * *
p2 {background-color: #9C2ACE;}/*P2 Layer Background color * *
. P3 {background-color: #317AC7;}/*p3 Layer Background color */
</style>

Four, write JavaScript boot code

The default is horizontal sliding, if you need to slide the vertical screen, please add direction: ' Vertical ' parameter. More parameters Please refer to the official website http://www.swiper.com.cn/api/basic/2014/1215/21.html

<script>
window.onload = function () {
  var myswiper = new Swiper ('. Swiper-container ', {
    direction: ') Vertical ',
    //If necessary
    the paging pagination: '. Swiper-pagination ',
    //If necessary forward back button
    Nextbutton: '. Swiper-button-next ',
    Prevbutton: '. Swiper-button-prev ',
    //If necessary scroll bar
    scrollbar: '. Swiper-scrollbar ',
  })
}
</script>

If multiple swiper nesting is required, change the JS code:

<script> var swiperh = new Swiper ('. Swiper-container-h ', {pagination: '. Swiper
    -pagination-h ', Paginationclickable:true, spacebetween:50});  var swiperv = new Swiper ('. Swiper-container-v ', {pagination: '. Swiper-pagination-v ', paginationclickable:
True, direction: ' Vertical ', spacebetween:50}); </script>