Swiper轮播使用记录--一个页面有多个DIV区域使用swiper进行轮播

在swiper的官方使用试例中。

<div class="swiper-container ">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"  id="main3"></div>
                        <div class="swiper-slide"  id="main31"></div>
                    </div>
                </div>

var mySwiper1 = new Swiper('.swiper-container', {
        autoplay: true,//可选选项，自动滑动
        speed:800,//可选选项，滑动速度
        autoplay: {
            delay: 5000,//1秒切换一次
          },
    })

但是，当有两个或多个div需要轮播的时候，就需要申明多个swiper对象。如果多个div,如

<div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"  id="main3"></div>
                        <div class="swiper-slide"  id="main31"></div>
                    </div>
                </div>
<div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"  id="main4"></div>
                        <div class="swiper-slide"  id="main41"></div>
                    </div>
                </div>

同样使用 swiper-container去创建swiper对象

var mySwiper1 = new Swiper('.swiper-container', {
        autoplay: true,//可选选项，自动滑动
        speed:800,//可选选项，滑动速度
        autoplay: {
            delay: 5000,//1秒切换一次
          },
    })

这样，就会造成只有第一个swiper-container DIV下的内容就行轮播，第二个就不会。

故，当遇到两个或多个DIV区域需要轮播时，就需要申明多个对象。

<div class="swiper-container visual_swiper1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"  id="main3"></div>
                        <div class="swiper-slide"  id="main31"></div>
                    </div>
                </div>
<div class="swiper-container visual_swiper2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"  id="main4"></div>
                        <div class="swiper-slide"  id="main41"></div>
                    </div>
                </div>

var mySwiper1 = new Swiper('.visual_swiper1', {
        autoplay: true,//可选选项，自动滑动
        speed:800,//可选选项，滑动速度
        autoplay: {
            delay: 5000,//1秒切换一次
          },
    })
var mySwiper2 = new Swiper('.visual_swiper2', {
        autoplay: true,//可选选项，自动滑动
        direction : 'vertical',//可选选项，滑动方向
        speed:2000,//可选选项，滑动速度
    })

标签：选项,轮播,Swiper,滑动,DIV,swiper,autoplay
来源： https://www.cnblogs.com/PingPo/p/13218859.html