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

Question

我正在尝试用基本动画制作滑动器幻灯片外部的导航元素，比如在第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

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

Answer 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;
}