我正在为轮播使用 slick.js 插件。我只想选择 .slick0-current
类之后的前两个元素。
Hy HTML 代码是:
<div class="slick-slide slick-current slick-active" data-slick-index="3" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide03" style="width: 150px;"></div>
<div class="slick-slide slick-active" data-slick-index="4" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide04" style="width: 150px;"></div>
<div class="slick-slide slick-active" data-slick-index="5" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide05" style="width: 150px;">next</div>
我可以选择 .slick0-current
类,但我在选择紧随其后的两个元素时遇到问题。我试过使用类似于 .slick-active:nth-child(2)
的东西,但这对我不起作用。
我的 jQuery 代码是:
jQuery( ".slick-next").click(function() {
jQuery(".slick-current").text("Im Previous");
jQuery(".slick-active").siblings(".slick-slide.slick-active").eq(0).html("Im Current");
jQuery(".slick-active").siblings(".slick-slide.slick-active").eq(2).html("Im After");
});
最佳答案
每次您使用“.slick-next”点击功能时,不会将 slider 弄乱到旋转木马的末尾。使用 slick 事件不是更好吗?
更新演示.. https://jsfiddle.net/joshmoto/6u314kwg/4/
$('.carousel').slick({
// slick stuff
}).on('afterChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-current',this).prev().text("Im Previous");
$('.slick-current',this).text("Im Current");
$('.slick-current',this).next().text("Im After");
});
如果您希望更改在动画之前发生,您可以将 afterChange
编辑为 beforeChange
。
这可能有点问题,但它是一个开始。如果轮播是无限模式,它应该可以工作,因为它只会更改克隆的幻灯片。
关于javascript - 你如何只选择它的兄弟之后的前两个 div 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51507577/