Во вкладках slick js?

Question

[ART4]

Добрый день, имеется таб, в ней 3 вкладки:

В каждой вкладне стоит slick карусель товаров. Первая карусель в первой вкладке всё хорошо. При нажатие на 2 вторую вкладку, сразу слетают стили, но при нажатие на прокрутку всё становится.



Код таба:

$(document).ready(function() {
	$('.btn').click(function(event) {
		$('.block').removeClass('active')
		var num = $(this).attr('data-num');
		$('#block'+num).addClass('active')	
	});
});

Slick code:

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

$('.responsive1').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

$('.responsive2').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

что не так?

Answer 1

[tyzberd]

нужно вызывать после переключения таба
$('.slick-slider').slick('refresh');

Comments

[ART4]

Вот так?

$(document).ready(function() {
  $('.btn').click(function(event) {
    $('.block').removeClass('active')
$('.slick-slider').slick('refresh');
    var num = $(this).attr('data-num');
    $('#block'+num).addClass('active')	
  });
});

[tyzberd]

думаю так

$(document).ready(function() {
  $('.btn').click(function(event) {
    $('.block').removeClass('active')
    var num = $(this).attr('data-num');
    $('#block'+num).addClass('active');
  $('.slick-slider').slick('refresh');	
  });
});

[tyzberd]

проблема в том что у вас блок скрыт и слик не может расчитать ширину

[Антон]

Или reinit

[ART4]

tyzberd, Не помогло(

Answer 2

[Денис]

Как вариант, переписать логику скрытия табов.
Вместо display: none, использовать другие способы скрытия неактивных табов