1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta name="viewport" content="width=device-width" /> 6 <title></title> 7 <link href="~/Scripts/Swiper/swiper.min.css" rel="stylesheet" /> 8 <script src="~/Scripts/Swiper/swiper3.4.2.min.js"></script> 9 </head> 10 <body> 11 12 <div class="swiper-container"> 13 <div class="swiper-wrapper"> 14 <div class="swiper-slide"><img src="123.png"/></div> 15 <div class="swiper-slide"><img src="123.png"/></div> 16 <div class="swiper-slide"><img src="123.png"/></div> 17 </div> 18 </div> 19 20 <script> 21 var mySwiper = new Swiper('.swiper-container', { 22 autoplay: 3000, 23 speed: 3000, 24 loop:true,//loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换 25 direction: 'vertical',//改变轮播方向 26 slidesPerView: 2,//设置slider容器能够同时显示的slides数量 27 observer: true, //修改swiper自己或子元素时，自动初始化swiper 28 observeParents: true //修改swiper的父元素时，自动初始化swiper 29 }); 30 </script> 31 32 </body> 33 </html>
loop，这个属性设置的话会复制若干个slide
observer，observeParents这两个属性在初始化上有关键作用