Swiper中文论坛

标题: slideTo切换后不触发slideChangeTransitionEnd事件 [打印本页]

---

作者: 棋子一名    时间: 2020-11-30 10:35
标题: slideTo切换后不触发slideChangeTransitionEnd事件


以下为全部代码：
<div class="" style="height: 50%;">

        <div class="swiper-container">

          <div class="swiper-wrapper">

                        <div class="swiper-slide blue-slide">

                                <img src="public/static/imgs/banner@2x.png" />

                        </div>

                        <div class="swiper-slide red-slide">

                                <img src="public/static/imgs/banner@2x.png" />

                        </div>

                        <div class="swiper-slide orange-slide">

                                <img src="public/static/imgs/banner@2x.png" />

                        </div>

                        <div class="swiper-slide red-slide">

                                <img src="public/static/imgs/banner@2x.png" />

                        </div>

                        <div class="swiper-slide orange-slide">

                                <img src="public/static/imgs/banner@2x.png" />

                        </div>

                </div>

               

                <!-- 如果需要导航按钮 -->

                <div class="swiper-button-prev">

                        <img src="public/static/imgs/left@2x.png" />

                </div>

                <div class="swiper-button-next">

                        <img src="public/static/imgs/right@2x.png" />

                </div>

                <style type="text/css">

                        .swiper-pagination span>img{

                                width: 1rem!important;

                                max-width: 1rem;

                        }

                </style>

                <div class="swiper-pagination">

                        <span class="active"><img src="public/static/imgs/icon_active@2x.png" /></span>

                        <span class=""><img src="public/static/imgs/icon_active@2x.png" /></span>

                        <span class=""><img src="public/static/imgs/icon_active@2x.png" /></span>

                        <span class=""><img src="public/static/imgs/icon_active@2x.png" /></span>

                        <span class=""><img src="public/static/imgs/icon_active@2x.png" /></span>

                        <!-- <span><img src="public/static/imgs/icon_back@2x.png" /></span> -->

                </div>

        </div>

        <script>

                var mySwiper = new Swiper('.swiper-container', {

                        loop: true,

                        loopAdditionalSlides:5,

                        autoplay: {

                                delay: 30000,//1秒切换一次

                        },  // 如果需要前进后退按钮

                        navigation: {

                                nextEl: '.swiper-button-next',

                                prevEl: '.swiper-button-prev',

                        },

                        pagination: {

                                el: '.swiper-pagination',

                                clickable: true,

                                type:'custom',

                        },

                        mousewheel:true,

                        on: {

                                 init: function(swiper){

                                         $(swiper.el).find(".swiper-pagination>span").each(function(index){

                                                 $(this).click(function(){

                                                         swiper.slideTo(index, 1000, false);//切换到第一个slide，速度为1秒

                                                 });

                                         });

                                 },

                                slideChangeTransitionEnd: function() {

                                        var select=this.activeIndex%5;

                                        $(this.el).find(".swiper-pagination>span").each(function(index){

                                                if(select==index){

                                                        $(this).css("opacity","1");

                                                }else{

                                                        $(this).css("opacity","0.3");

                                                }

                                        });

                                }

                        }

                });

        </script>

</div>

---

作者: AnTi的大宝宝    时间: 2020-12-25 10:27
slideTo(index, speed, runCallbacks)
第三个参数设置为false时不会触发transition回调函数

---

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)

Powered by Discuz! X3.2