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实现移动端导航和内容板块的联动


下一篇:js轮播图自动切换和css做页面自动渐变