如何使用Swiper.js在活动幻灯片上开始播放动画

如何解决如何使用Swiper.js在活动幻灯片上开始播放动画

我正在尝试使用基本动画（例如，当第2个和第3个幻灯片激活时将文本颜色更改为黑色）来对滑动幻灯片之外的导航元素进行动画处理 这是我的代码

<div class="swiper-container swiper-container-h">

<!---------- NAV START ---------->

                 <div class="nav">
                    <div class="logo">
                        <h1>nerv</h1>
                    </div>
                    <div class="login">
                        <button class="login-icon" data-modal-target="#modal">
                            <img src="images/Icons/login.png"></button>
                    </div>
                    <div class="ctgris">
                        <ul>
                            <li><a href="Womens.php">WOMENS</a></li>
                            <li><a href="Mens.php">MENS</a></li>
                            <li><a href="#">KIDS</a></li>
                        </ul>
                    </div>
                </div> 
                
                <!----- NAV END ----->
                
                <div class="swiper-wrapper">
                    <div class="swiper-slide slide1">
                        <div class="swiper-container swiper-container-v">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide slide1">
                                    <div class="caption anmt-v">
                                        <h1>BUILDING DREMAS THROW CLOTHES</h1>
                                    </div>
                                </div>
                                <div class="swiper-slide slide2">
                                    <div class="caption anmt-v">
                                        <h1>BUILDING DREMAS THROW CLOTHES</h1>
                                    </div>
                                </div>
                                <div class="swiper-slide slide3">
                                    <div class="caption anmt-v">
                                        <h1>BUILDING DREMAS THROW CLOTHES</h1>
                                    </div>
                                </div>
                            </div>
                            <!-- Add Arrows -->
                            <div class="swiper-button-next swiper-button-next-v"></div>
                            <div class="swiper-button-prev swiper-button-prev-v"></div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination swiper-pagination-v"></div>
                        </div>
                    </div>
                    <div class="swiper-slide slide2">
                        <!-- Add Arrows -->
                        <div class="swiper-button-next swiper-button-next-h"></div>
                        <div class="swiper-button-prev swiper-button-prev-h"></div>
                    </div>
                    <div class="swiper-slide slide3">
                        <!-- Add Arrows -->
                        <div class="swiper-button-prev swiper-button-prev-h"></div>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-pagination-h"></div>

这是我的js，用于初始化swiper并触发swiper-slide内部元素的动画

var swiperH = new Swiper('.swiper-container-h',{
    speed: 1500,keyboard: {
        enabled: true,},navigation: {
        nextEl: '.swiper-button-next-h',prevEl: '.swiper-button-prev-h',pagination: {
        el: '.swiper-pagination-h',dynamicBullets: true,clickable: true,on: {
        slideChangeTransitionStart: function () {
            $('.anmt-h').hide(0);
        },slideChangeTransitionEnd: function () {
            $('.anmt-h').show(0);
        },}
});

'''

any help would be appreciated

解决方法

解决此问题的关键是在自定义函数中找到当前索引。 将动作连接到slideTransitionEnd，并使用将被更新的 realIndex 属性。

slideChangeTransitionEnd: function () {
  $('.anmt-h').show(0);
  var myCurrentSlide = this.realIndex;
 //set the action
  if(myCurrentSlide != 0){
   //perform action to change color 
  }
  else {
  //perform action to reset the function
  }
}

您的颜色更改功能可以是直接的js操作，也可以是在定义类样式之后更好的类更改。对于我的示例代码，我希望它添加类isBlack

  $(".ctgris li").each(function(n){
if(n>0){ 
  if(n == myCurrentIndex){ $(this).addClass("isBlack")}
}else{ $(this).removeClass("isBlack")}
})

示例CSS

.isBlack {
  color:black;
}