Есть табы на jQuery. Неактивный таб скрыт через display:none
. В табах - slick slide. Когда переключаюсь на другой таб, слайдер не заработает пока не прокручу его. Прочитал, что нужно использовать метод slick('reinit')
при клике на таб. И в таком случае слайдер начинает работать, но при каждом клике на таб слайдер начинает множится в разы, как в фильме "Живое".
Подскажите, как правильно пользоваться методом reinit
?
Вот codepen.
Метод reinit
является недокументированным. Документировано только событие reinit
. Так что этот вариант - отбрасываем.
slick слайдеру нужно иметь ширину при инициализации. Элемент со стилем display:none
имеет ширину 0.
Одно из возможных решений - отключать неактивные табы стилем:
display: flex !important;
height: 0px;
overflow: hidden;
При этом активный таб должен иметь стиль:
height: auto;
Вариант этого решения приведен здесь.
Мне также пришлось добавить ширину для класса второго слайдера. Без него она улетала вдаль при переключениях...
.slider2 {
width: 500px;
}
Не согласен с Сергеем. Если, к примеру, сделать повторную обработку размеров путём 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 или класс активный.
Виртуальный выделенный сервер (VDS) становится отличным выбором
Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение
Можете подсказать какие параметры изменить чтобы сделать размер этого магазина таким width: 196rem; height: 168rem; ? Пытался менять различные параметры,...
У меня на localhost:8080 живёт небольшой фронтенд на vue, который при помощи axios черпает данные с localhost:1234
На сайте https://ivararu/ внизу главной страницы есть слайдер с фотками из Инстаграма, при клике на фотки открывается модальное окно с фоткой и комментариями...