zoukankan      html  css  js  c++  java
  • swiper轮播图(逆向自动切换类似于无限循环)

    swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高,

    ,不过还是能够用swiper本身的特性更改成无限循环的轮播的。

    <!--HTML代码-->
    <div class="course-banner-box">
        <div class="swiper-container">
            <div class="swiper-wrapper"> <!--四张轮播图-->
                <div class="swiper-slide slide1"></div>
                <div class="swiper-slide slide2"></div>
                <div class="swiper-slide slide3"></div>
                <div class="swiper-slide slide4"></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="button-box">
                <div class="button"> <!--左右按钮-->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
    
            </div>
    
        </div>
    </div>
    
    <!--script代码-->
    
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',//pagination分页器
            nextButton: '.swiper-button-next',//前进后退按钮
            prevButton: '.swiper-button-prev',
            paginationClickable: true,//参数设置为true时,点击分页器的指示点分页器会控制Swiper切换
            spaceBetween: 30,//slide之间的距离(单位px)。
            centeredSlides: true,//设定为true时,活动块会居中,而不是默认状态下的居左。
            loop : true,//复制多份循环(这里就是让轮播看起来是循环的,去掉这个就恢复了默认的swiper轮播)
            autoplay: 3000,//自动切换的时间间隔(单位ms),不设定该参数slide不会自动切换。
            autoplayDisableOnInteraction: false//点击后打断auto-play
        });
    </script>
  • 相关阅读:
    centos 搭建 sftp 服务器
    apt-get 安装时,提示lock被占用
    Kafka
    设计模式-分类
    SparkSQL – 从0到1认识Catalyst
    Spark分布式计算引擎
    Spark存储管理
    Spart RDD
    硬件工程师的你也不想一辈子画图、调板子吧!!!
    如何理解IPD+CMMI+Scrum一体化研发管理解决方案之Scrum篇
  • 原文地址:https://www.cnblogs.com/zxcc/p/7591736.html
Copyright © 2011-2022 走看看