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>