When changing the product slider, the grid and arrows break, how to fix it?

Question

css

There is a site .

I implemented a product slider on the page, by clicking "New" the slider for some reason loses its width and the grid breaks.
And also how to bind the "arrows" so that they are not duplicated when changing the slider?

Answer 1

I implemented a product slider on the page, by clicking "News" the slider for some reason loses its width and the grid breaks.

After clicking on the tab you need to reinitialize the slider

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

And also how to bind the "arrows" so that they are not duplicated when changing the slider?

About arrows. The slick has methods. Add arrows not through the slick options, but simply with the code in html. Then assign actions to them:

<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'); // применяем к слайдеру метод
});

Outcome: