• 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); } } })

    效果图

  • 相关阅读:
    海云健康:上云为10万家药店带去了什么价值?
    PostgreSQL数据目录深度揭秘
    当设计模式遇上 Hooks
    SpringBoot 优雅停止服务的几种方法
    【2021-08-19】连岳摘抄
    【2021-08-18】该休息,还是要好好休息
    【2021-08-17】心里没底,就给它得找个底
    NFLSOJ 1072
    Solution -「ARC 125F」Tree Degree Subset Sum
    Solution -「ARC 125E」Snack
  • 原文地址:https://www.cnblogs.com/cyhsmile/p/13267308.html
Copyright © 2020-2023  润新知