如何使用 Swiper.js 在活动幻灯片上启动动画答案

【问题标题】：How to start an animation on the active slide with Swiper.js如何使用 Swiper.js 在活动幻灯片上启动动画
【发布时间】：2020-11-06 19:24:54
【问题描述】：

我正在尝试使用基本动画为滑动幻灯片之外的导航元素设置动画，例如在第二张和第三张幻灯片处于活动状态时将文本颜色更改为黑色这是我的代码

<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

【问题讨论】：

将您的代码发布在像 codepen 这样的平台上会非常有帮助，这样社区就可以看到您的代码在运行中。

标签： javascript html css css-animations swiper.js

【解决方案1】：

解决这个问题的关键是在你的自定义函数中找到当前索引。将动作连接到 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;
}

【讨论】：