标签：选项 轮播 Swiper 滑动 DIV swiper autoplay

在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。