swiper——自动轮播

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更新。
});