2

Есть табы на jQuery. Неактивный таб скрыт через display:none. В табах - slick slide. Когда переключаюсь на другой таб, слайдер не заработает пока не прокручу его. Прочитал, что нужно использовать метод slick('reinit') при клике на таб. И в таком случае слайдер начинает работать, но при каждом клике на таб слайдер начинает множится в разы, как в фильме "Живое". Подскажите, как правильно пользоваться методом reinit?

Вот codepen.

0

2 ответа 2

3

Не согласен с Сергеем. Если, к примеру, сделать повторную обработку размеров путём window RESIZE, слайдер так же будет работать, а размеры ещё всё так же будут перемножаться - 13000, 26000, 52000 - и так далее, сколько раз потыкаете по табам, столько будут именно ДОБАВЛЯТЬСЯ новые значения к старым. Я считаю это проблема именно SLICK SLIDER-a, а не каких-то правил, которых нет..... Значит разработчики ПЛОХО ошибки свои выявляют. У меня на флексах один слайдер выдавал число, которое система выводила примерно в таком виде 1.4886191506363E+136 (число возведённое в сотую степень, и это при двух слайдах всего). Так что в этом отношении Флексы являются самой большой "задницей", а не слайдеры. Лишь немногие способны с ними работать нормально. Только парочку увидел, и Слик, к глубочайшему сожалению, явно НЕ один из них, и вряд ли когда будет. В нём возможностей как иголок в ёжике - напичкан всем чем можно до отвала.


Добавлено через время:

Есть такое свойство как setPosition: Для смены содержимого у меня в старой вёрстке:

$('.openTab').click(function(){
    if($('.block-tab').is(':visible')){
        setTimeout(function(){
        $(".slick-slider").slick('setPosition');
      $(window).resize();
      },500);
    }
});

В собственном плагине Табов добавил так:

if($('.tab').is('.active')){
    setTimeout(function(){
        $('.tabs '+rtLink).find(".slynner").slick('setPosition');
        $(window).resize();
    },0);
   }

Хотя можно и просто

$('.mart').slick('setPosition');

=)) Конечно, с проверкой блока на visible или класс активный.

1

Метод reinit является недокументированным. Документировано только событие reinit. Так что этот вариант - отбрасываем.

slick слайдеру нужно иметь ширину при инициализации. Элемент со стилем display:none имеет ширину 0.

Одно из возможных решений - отключать неактивные табы стилем:

display: flex !important;
height: 0px;
overflow: hidden;  

При этом активный таб должен иметь стиль:

height: auto;  

Вариант этого решения приведен здесь.

Мне также пришлось добавить ширину для класса второго слайдера. Без него она улетала вдаль при переключениях...

.slider2 {
  width: 500px;
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.