Question

我正在将slick.js插件用于轮播。我只选择.slick0-current类之后的前两个元素。

您的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");

});

Answer 1

每次使用“ .slick-next”单击功能时，并不是要使滑块滑向转盘末端。使用滑动事件会更好吗？

更新了演示。.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。

这可能是一个小问题，但这是一个开始。如果轮播是无限模式，它应该可以工作，因为它只会更改克隆的幻灯片。

Answer 2

我没有在这里重新创建整个光滑的演示...

您需要的是.nextAll()和.filter()方法。

在下面的演示中，所得元素集合中的元素变为红色。

$(".slick-current").nextAll().filter(function(index){
  if(index<2){
   return this;
  }
}).addClass("inCollection");

.inCollection{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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;">one (current)</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;">two</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;">three</div>

<div class="slick-slide slick-active" data-slick-index="6" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide05" style="width: 150px;">Four</div>

<div class="slick-slide slick-active" data-slick-index="7" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide05" style="width: 150px;">Five</div>

在同级后如何只选择前两个div元素？

2 个答案: