@ART4

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

Добрый день, имеется таб, в ней 3 вкладки:
4nft07GIeQ45E2AVfRepsNzITzQAKIX73BjeiKKE
В каждой вкладне стоит slick карусель товаров. Первая карусель в первой вкладке всё хорошо. При нажатие на 2 вторую вкладку, сразу слетают стили, но при нажатие на прокрутку всё становится.

HoBZuEwXOPqYF2SSVxyhQeBgEnufwu3rhnAg7VPw

Код таба:
$(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
      }
    }
  ]
});


что не так?
  • Вопрос задан
  • 53 просмотра
Пригласить эксперта
Ответы на вопрос 2
@tyzberd
нужно вызывать после переключения таба
$('.slick-slider').slick('refresh');
Ответ написан
@This_is_him
Как вариант, переписать логику скрытия табов.
Вместо display: none, использовать другие способы скрытия неактивных табов
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы