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) } } });
  • 相关阅读:
    Getting started with the Web ADF
    将搜狗浏览器设置为IIS的默认浏览器
    What is installed with the Web ADF?
    如何修改Flex的默认浏览器
    What is the Web Application Developer Framework
    windows C++获得本地IP地址
    lua table函数库
    【铸铁】C++服务器面试题.doc
    VC2008下提示找不到MSVCP90D.dll的解决办法
    排序
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/11060172.html
Copyright © 2011-2022 走看看