zoukankan      html  css  js  c++  java
  • swiper在loop模式,当轮播到最后一张图时候,做其他事件

    1、引入文件:

    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>

    2、style样式:

    html,
            body {
                position: relative;
                height: 100%;
            }
            
            body {
                background: #eee;
                font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                font-size: 14px;
                color: #000;
                margin: 0;
                padding: 0;
            }
            
            .swiper-container {
                width: 100%;
                height: 100%;
                margin-left: auto;
                margin-right: auto;
            }
            
            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;
                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }

    3、body:

    <div class="swiper-container swiper-no-swiping">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="image/n1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="image/n2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="image/n3.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="image/n4.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="image/n5.jpg" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

    4、js:

    var swiper = new Swiper('.swiper-container', {
                loop: true, //禁止手动滑动
                direction: 'vertical',
                slidesPerView: 1,
                spaceBetween: 30,
                speed: 500,
                mousewheel: true,
                autoplay: {
                    disableOnInteraction: false, //手动滑动之后不打断播放
                    delay: 1000
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
           //打印suwper当前图片的索引值 on: { slideChangeTransitionEnd() {
    this.active = $('.swiper-slide-active').attr('data-swiper-slide-index') var sum = this.realIndex + 1 console.log(sum) } } });
  • 相关阅读:
    C++ 将对象写入文件 并读取
    IronPython fail to add reference to WebDriver.dll
    How to Capture and Decrypt Lync Server 2010 TLS Traffic Using Microsoft Tools
    .net code injection
    数学系学生应该知道的十个学术网站
    Difference Between Currency Swap and FX Swap
    Swift开源parser
    谈谈我对证券公司一些部门的理解(前、中、后台)[z]
    JDK8记FullGC时候Metaspace内存不会被垃圾回收
    JVM源码分析之JDK8下的僵尸(无法回收)类加载器[z]
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/11060172.html
Copyright © 2011-2022 走看看