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) } } });
  • 相关阅读:
    8.ps输出属性-----状态
    洛谷P1057 传球游戏
    动态规划
    洛谷P1192 台阶问题
    最大公约数和最小公倍数
    C++ memcpy()函数用法
    next_permutation(a,a+n)
    std::ios::sync_with_stdio(false);
    让计算机很快地求出a^b%c;
    洛谷P1433 吃奶酪
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/11060172.html
Copyright © 2011-2022 走看看