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

时间:2018-02-12 18:16:44

标签: jquery slick.js

切换标签时,滑块脱落,但我解决了这个问题方法.slick(' setPosition');但现在有一个第二个问题,当我在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');
});

1 个答案:

答案 0 :(得分:0)

你可以使用$ .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