Question

切换标签时，滑块脱落，但我解决了这个问题方法.slick（＆＃39; setPosition＆＃39;）;但现在有一个第二个问题，当我在tab1的名字上非常快地点击很多次...时，它打破了滑块:( jsFiddle

function tabs() {
  $('.tab-item').not(':first').hide();
  $('.js-tab .tab-list li').click(function() {
    $('.js-tab .tab-list li').removeClass('active').eq($(this).index()).addClass('active');
    $('.js-tab .tab-item').hide().eq($(this).index()).fadeIn();
    $('.slider').slick('setPosition');
  }).eq(0).addClass('active');
}

function slider(selector) {
  $(selector).slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    dots: false,
    arrows: false
  });
}

$(document).ready(function() {
  tabs();
  slider('.slider');
});

Answer 1

你可以使用$ .debounce。 link

$('.js-tab .tab-list li').click($.debounce(250, function() {
  $('.js-tab .tab-list li').removeClass('active').eq($(this).index()).addClass('active');
  $('.js-tab .tab-item').hide().eq($(this).index()).fadeIn();
  $('.slider').slick('setPosition');
})).eq(0).addClass('active');

请注意，它需要另一个库：jquery-throttle-debounce

在选项卡中打破光滑的滑块

1 个答案: