Question

我在一个页面上使用Slick Slider插件有多个轮播。我已设法为每个轮播设置自定义导航，但我希望每个导航链接在单击时在两个类之间切换。

我设法在两者之间创建了一个切换，但它将切换应用到所有轮播，而不仅仅是点击了导航的轮播。

更新 我需要这些类只在轮播更改幻灯片时切换。

我几乎在需要的地方，但有点卡住，并希望得到任何帮助。

这是演示 - http://jsfiddle.net/81t4pkfa/158/

HTML：

    date    total
3   Mar-06  1.8
4   Apr-06  1.7

JS：

earning['date'] = earning.date.apply(lambda x: pd.to_datetime(x, format='%b-%y'))

Answer 1

更改为

 $(".tabs li a").click(function(){
      var slideIndex = $(this).parent().index();
      $(this).closest('.test').slick('slickGoTo', parseInt(slideIndex));
    $(this).parents('.tabs').find('.tab').toggleClass('inactive-slide active-slide');
    });

编辑：

$(".tabs li a").click(function(){
  var slideIndex = $(this).parent().index();
  $(this).closest('.test').slick('slickGoTo', parseInt(slideIndex));
 $(this).parents('.tabs').find('.tab').removeClass('active-slide');
  $(this).parents('.tabs').find('.tab').addClass('inactive-slide');
  $(this).parent().addClass('active-slide');
$(this).parent().removeClass('inactive-slide'); 
});

Answer 2

问题是因为您在所有.tabs元素上切换了该类。相反，您需要遍历DOM才能仅在toggleClass()与导致.tabs事件的a相同的click内调用closest()。为此，您可以使用find()和$(".tabs li a").click(function(){ var slideIndex = $(this).parent().index(); $(this).closest('.test').slick('slickGoTo', parseInt(slideIndex)); $(this).closest('.tabs').find('.tab').toggleClass('inactive-slide active-slide'); });，如下所示：

{{1}}

Updated fiddle

Answer 3

您真正想要做的是更改标签活动类，而不是单击但更改幻灯片。您应该在slickGoTo点击事件中仅保留幻灯片更改触发器（.tab）。 Slick Carousel中有一组事件会告诉您幻灯片已经（或将要）更改，例如beforeChange。这就是你应该用来切换活动的东西。

您的代码应如下所示：

$('.test').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  if (currentSlide !== nextSlide) {
      $(this).find('.tab').toggleClass('inactive-slide active-slide');
  }
});

$(".tabs li a").click(function(){
  var slideIndex = $(this).parent().index();
  $(this).closest('.test').slick('slickGoTo', parseInt(slideIndex));
});

http://jsfiddle.net/norin89/81t4pkfa/161/

更新：请注意，由于.active-slide / .inactive-slide类切换，这仅适用于2张幻灯片。因此，在当前代码中的幻灯片更改时，所有先前不活动的选项卡都将切换为活动状态。如果您只想让一个活动标签获得.active-slide课程，则可以执行以下操作：

$('.test').on('beforeChange', function(event, slick, currentSlide, nextSlide){
      $(this).find('.tab').removeClass('active-slide').addClass('inactive-slide')
             .eq(nextSlide).toggleClass('active-slide inactive-slide');
});

http://jsfiddle.net/norin89/81t4pkfa/164/

如何在每个对应的div的两个类之间切换？

3 个答案: