Слайдер Slick отображается каряво?

Question

[Денис Рязанов]

Есть 3 кнопки "группа товара". При клике на которые появляется свой слайдер с товарами. Сделал три блока с группами товаров два из них "display:none", один с классом active. при нажатии на конкретную кнопку показываю конкретный блок(slider). Вопрос: "Почему слайдеры при клике отображаются каряво, только когда свип сделаешь становятся нормально и потом нормально все работает, но первый раз каряво?

$( document ).ready(function() {
	$('.sale').click(function() {
		$('.secondSlider').addClass('activeSlider');
		$('.firstSlider').removeClass('activeSlider');
		$('.thirdSlider').removeClass('activeSlider');
	});
	$('.new').click(function() {
		$('.thirdSlider').addClass('activeSlider');
		$('.firstSlider').removeClass('activeSlider');
		$('.secondSlider').removeClass('activeSlider');
	});
	$('.hits').click(function() {
		$('.firstSlider').addClass('activeSlider');
		$('.thirdSlider').removeClass('activeSlider');
		$('.secondSlider').removeClass('activeSlider');
	});
	
	$('.responsive').slick({
	  autoplay: true,
	  dots: false,
	  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

[Евгений]

Потому-что при инициализации они скрыты. Инициализируйте слайдер по нажатию на кнопке

Comments

[Денис Рязанов]

Ну я же вроде при нажатии на кнопку показываю его. Поправьте если я не прав

[Евгений]

Денис Рязанов, вы только включаете видимость его
попробуйте так

$('.hits').click(function() {
    $('.firstSlider').addClass('activeSlider').resize();
    $('.thirdSlider').removeClass('activeSlider');
    $('.secondSlider').removeClass('activeSlider');
  });

[Денис Рязанов]

Спасибо попробую