При смене слайдера товаров, ломается сетка и стрелки, как исправить?

Question

[Константин]

Есть сайт.

На странице реализовал слайдер товаров, по клику "Новинки" слайдер почему-то теряет ширину и ломается сетка.
А также как привязать "стрелки", чтобы они не дублировались при смене слайдера?

Answer 1

[Eugene Chefranov]

На странице реализовал слайдер товаров, по клику "Новинки" слайдер почему то теряет ширину и ломается сетка.

После клика на таб вам надо реинициализировать слайдер

$('.type_slider').on('click', function() { // класс кнопки таба
    $('.responsive').slick('reinit'); // реинициализация слика
})

А также как привязать "стрелки", чтобы они не дублировались при смене слайдера?

По поводу стрелочек. У слика есть методы. Добавляйте стрелочки не через опции слика, а просто кодом в html. Потом повесьте на них действия:

<div class="slider-arrows noshow_mob">
    <span class="slider-arrow slide-prev"><img width="16" src="img/back.png" alt="Prev" /></span>
    <span class="slider-arrow slide-next"><img width="16" src="img/next.png" alt="Next" /></span>
</div>

$('.slide-next').on('click', function() { // класс кнопки далее
    $('.responsive').slick('slickNext'); // применяем к слайдеру метод
});

$('.slide-prev').on('click', function() { // класс кнопки назад
    $('.responsive').slick('slickPrev'); // применяем к слайдеру метод
});

Итог:

Comments

[Константин]

Не совсем понял как это работает, просто вставив код в js не работает, расскажите пожалуйста как его адаптировать под мою проблему.

[Eugene Chefranov]

.type_slider - класс кнопки таба
.slider_product - класс вашего слайдера

[Константин]

Eugene Chefranov, к сожалению не помогло. И старый слайдер перестал исчезать(

[Eugene Chefranov]

Константин, где код вставляете/подключаете?

[Константин]

Eugene Chefranov, тут после таба

[Eugene Chefranov]

Константин, у меня работает, почистите кеш CTRL+F5

[Eugene Chefranov]

Константин, и $('.slider_product').slick(); замените на $('.slider_product').slick('reinit');

[Eugene Chefranov]

Константин, по поводу стрелочек. У слика есть методы. Добавляйте стрелочки не через опции слика, а просто кодом в html. Потом повесьте на них действия:

<span class="slider-arrow slick-next"><img width="16" src="img/next.png"></span>
<span class="slider-arrow slick-prev"><img width="16" src="img/back.png"></span>

$('.slick-next').on('click', function() { // класс кнопки далее
$('.responsive').slick('slickNext'); // применяем к слайдеру метод
});

$('.slick-prev').on('click', function() { // класс кнопки назад
$('.responsive').slick('slickPrev'); // применяем к слайдеру метод
});

И у вас в коде я увидел, что вы два раза вызываете слайдера (.responsive, .responsive2). Достаточно один раз.

[Eugene Chefranov]

Константин, дополнил изначальный ответ

[Константин]

Eugene Chefranov, Шикарно, все работает! Спасибо, Вам огромное!!!