zoukankan      html  css  js  c++  java
  • swiper使用loop后,无法获取索引的问题

    swiper官网中(https://www.swiper.com.cn/api/properties/310.html)提到

     

     就是说如果写了 loop:true是的时候,会在循环完切换到第一张,但是获取索引就是realIndex

    下面上代码

     <div class="main-left">
                        <div class="swiper-container swiper-banner">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide slide-items">
                                    <a class="slide-a">
                                        <img
                                            src="http://www.chooseauto.com.cn/image2/2019/11/23/CCD7D1D053B645F7B8C11BC0F75116FA.jpg">
    
                                    </a>
                                    <div class="slide-tit">
                                        <a href="/zixun/hangye/307046.shtml" target="_blank">新“双积分”政策指向何方</a>
                                    </div>
                                </div>
    
                                <div class="swiper-slide slide-items"> <a class="slide-a">
                                        <img
                                            src="http://www.chooseauto.com.cn/image3/2020/7/6/25FE83B2DF3549A99C9D57A48D8E6236.png">
    
                                    </a>
                                    <div class="slide-tit">
                                        <a href="/zixun/hangye/307046.shtml" target="_blank">新“双积分”政策指向何方</a>
                                    </div>
                                </div>
                                <div class="swiper-slide slide-items"> <a class="slide-a">
                                        <img
                                            src="http://www.chooseauto.com.cn/image4/2020/7/7/C369CDF2C4C14E4EA1146F872138F999.jpg">
    
                                    </a>
                                    <div class="slide-tit">
                                        <a href="/zixun/hangye/307046.shtml" target="_blank">新“双积分”政策指向何方</a>
                                    </div>
                                </div>
                            </div>
                           <div class="swiper-button-prev arrow-left" ></div> 
                            <!--左箭头。如果放置在swiper-container外面,需要自定义样式。-->
                            <div class="swiper-button-next arrow-right"></div> 
                            <!--右箭头。如果放置在swiper-container外面,需要自定义样式。-->
                        </div>
                        <div class="index-wrap"> <span class="active-num">1</span></div>
                    </div>

    js

    var mySwiper = new Swiper('.swiper-banner', {
        autoplay: true,//自动播放
        loop: true,//循环播放
        pagination: {
            el: '#banner_paination',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        on:{
            slideChangeTransitionEnd:function(){
    //获取当前的索引 $(
    ".active-num").html(this.realIndex + 1); } } })

    效果图

  • 相关阅读:
    dedecms(4)
    dedecms(3)
    jquery-submit:f[s] is not a function
    修改mysql字符集
    CentOS-6.3安装配置SVN[转载]
    centos下编译安装curl拓展
    CSS杂集(标准流&多行垂直居中)
    杂集一(yii自动登陆过程浅析)
    webservice连接超时处理
    JavaScript 实现触点式弹出菜单插件
  • 原文地址:https://www.cnblogs.com/cyhsmile/p/13267308.html
Copyright © 2011-2022 走看看