zoukankan      html  css  js  c++  java
  • 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,//可选选项,滑动速度
        })
  • 相关阅读:
    2.6.2.MySQL主从复制的原理
    2.4.5 MySQL InnoDB重做与回滚介绍
    PRML读书笔记_绪论曲线拟合部分
    python3_字符串
    PRML读书笔记_绪论
    python3_列表、元组、集合、字典
    linux_软件安装
    shell获取帮助
    linux_查看磁盘与目录容量
    linux_压缩解压命令(zip/tar)
  • 原文地址:https://www.cnblogs.com/PingPo/p/13218859.html
Copyright © 2011-2022 走看看