swiper官网:https://www.swiper.com.cn/ html: <!--从左到右逆向轮播--> <div class="div_inner"> <div class="swiper-container" id="swiper-container1" style="width: 100%;" dir="rtl"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="img/1.jpg"></div> <div class="swiper-slide"><img src="img/2.jpg"></div> <div class="swiper-slide"><img src="img/3.jpg"></div> <div class="swiper-slide"><img src="img/4.jpg"></div> <div class="swiper-slide"><img src="img/5.jpg"></div> <div class="swiper-slide"><img src="img/1.jpg"></div> <div class="swiper-slide"><img src="img/2.jpg"></div> <div class="swiper-slide"><img src="img/3.jpg"></div> <div class="swiper-slide"><img src="img/4.jpg"></div> <div class="swiper-slide"><img src="img/5.jpg"></div> <div class="swiper-slide"><img src="img/6.jpg"></div> <div class="swiper-slide"><img src="img/7.jpg"></div> <div class="swiper-slide"><img src="img/8.jpg"></div> <div class="swiper-slide"><img src="img/9.jpg"></div> </div> </div> </div>
<!--从右向左轮播--> <div class="div_inner"> <div class="swiper-container" id="swiper-container2" style="width: 100%;"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="img/1.jpg"></div> <div class="swiper-slide"><img src="img/2.jpg"></div> <div class="swiper-slide"><img src="img/3.jpg"></div> <div class="swiper-slide"><img src="img/4.jpg"></div> <div class="swiper-slide"><img src="img/5.jpg"></div> <div class="swiper-slide"><img src="img/1.jpg"></div> <div class="swiper-slide"><img src="img/2.jpg"></div> <div class="swiper-slide"><img src="img/3.jpg"></div> <div class="swiper-slide"><img src="img/4.jpg"></div> <div class="swiper-slide"><img src="img/5.jpg"></div> <div class="swiper-slide"><img src="img/6.jpg"></div> <div class="swiper-slide"><img src="img/7.jpg"></div> <div class="swiper-slide"><img src="img/8.jpg"></div> <div class="swiper-slide"><img src="img/9.jpg"></div> </div> </div> </div>
js:
var mySwiper1 = new Swiper('#swiper-container1', { loop : true, //环路,让Swiper看起来是循环的 speed : 10000, //速度 freeMode : true, //根据惯性滑动可能不止一格且不会贴合 observer : true, //修改swiper自己或子元素时,自动初始化swiper autoplay : true, //自动切换 autoplay : { delay : 0, //自动切换的时间间隔,单位ms disableOnInteraction : false //用户操作swiper之后,是否禁止autoplay }, noSwiping : true, //设为true时,可以在slide上(或其他元素)增加类名'swiper-no-swiping',使该slide无法拖动 autoHeight : true, //自动高度 spaceBetween : 3, //两个slide的间隔 slidesPerView : 'auto', //设置slider容器能够同时显示的slides数量 observeParents : true //当Swiper的父元素变化时Swiper更新。 });
var mySwiper2 = new Swiper('#swiper-container2', { loop : true, //环路,让Swiper看起来是循环的 speed : 10000, //速度 freeMode : true, //根据惯性滑动可能不止一格且不会贴合 observer : true, //修改swiper自己或子元素时,自动初始化swiper autoplay : true, //自动切换 autoplay : { delay : 0, //自动切换的时间间隔,单位ms disableOnInteraction : false //用户操作swiper之后,是否禁止autoplay }, noSwiping : true, //设为true时,可以在slide上(或其他元素)增加类名'swiper-no-swiping',使该slide无法拖动 autoHeight : true, //自动高度 spaceBetween : 3, //两个slide的间隔 slidesPerView : 'auto', //设置slider容器能够同时显示的slides数量 observeParents : true //当Swiper的父元素变化时Swiper更新。 });