swiper-demo1

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="Swiper-3.4.1/dist/css/swiper.min.css"/>
 7         <style type="text/css">
 8             .swiper-container {
 9                 width: 600px;
10                 height: 300px;
11                 background: blueviolet;    
12             }  
13             .swiper-slide{
14                 width: 25%;
15                 height: 150px;
16                 background: magenta;
17                 color: #FFF;
18                 line-height: 150px;
19                 font-size: 20px;
20                 text-align: center;
21             }
22         </style>
23     </head>
24     <body>
25         <div class="swiper-container">
26             <div class="swiper-wrapper">
27                 <div class="swiper-slide"> 1</div>
28                 <div class="swiper-slide"> 2</div>
29                 <div class="swiper-slide"> 3</div>
30                 <div class="swiper-slide"> 4</div>
31                 <div class="swiper-slide"> 5</div>
32                 <div class="swiper-slide"> 6</div>
33                 <div class="swiper-slide"> 7</div>
34                 <div class="swiper-slide"> 8</div>
35                 <div class="swiper-slide"> 9</div>
36             </div>
37             <div class="swiper-pagination"></div>
38         </div>
39         <script src="js/jquery/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
40         <script src="Swiper-3.4.1/dist/js/swiper.jquery.min.js"></script>
41         <script>        
42           var mySwiper = new Swiper ('.swiper-container', {
43             slidesPerView : 4,
44                  //这两个貌似没有影响
45             //slidesPerGroup : 4,
46              //slidesPerGroup : 2,
47             slidesPerColumn : 2,
48             slidesPerColumnFill : 'row',
49             pagination: '.swiper-pagination',
50             autoplayDisableOnInteraction: false
51             
52           })        
53           </script>
54     </body>
55 </html>