查看: 1286|回复: 1

slideTo切换后不触发slideChangeTransitionEnd事件

[复制链接]

该用户从未签到

1

主题

4

帖子

6

积分

新手上路

Rank: 1

积分
6
发表于 2020-11-30 10:35:56 | 显示全部楼层 |阅读模式

无标题.png
以下为全部代码:
<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>

回复

使用道具 举报

该用户从未签到

0

主题

1

帖子

3

积分

新手上路

Rank: 1

积分
3
发表于 2020-12-25 10:27:19 | 显示全部楼层
slideTo(index, speed, runCallbacks)
第三个参数设置为false时不会触发transition回调函数
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2021-11-29 10:57 , Processed in 0.075450 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表