Hello!
I use slick slider, it has the rows property, which is needed at one resolution.
As a result, when this property starts to work, the splinter breaks the block into separate blocks and everything breaks down.
I decided to go another way, I’ve put the script
var width = window.innerWidth || document.body.clientWidth; var $slick = $('.js-slider-gift'); function initSlick() { if(width < 960) { if ($slick.hasClass('slick-initialized')) { $slick.slick('unslick'); }; $slick.slick({ slidesToShow: 1, slidesToScroll: 1, infinite: false, mobileFirst: true, arrows: false, variableWidth: true, responsive: [ { breakpoint: 599, settings: { slidesToShow: 2 } } ] }); }; if (width >= 960) { $slick.slick({ rows: 2, slidesToShow: 3, slidesToScroll: 3, arrows: true, infinite: false, dots: false, prevArrow: '<a href="javascript:void();" class="b-product-carousel-gift__arrow b-product-carousel-gift__arrow--prev carousel-control left"></a>', nextArrow: '<a href="javascript:void();" class="b-product-carousel-gift__arrow b-product-carousel-gift__arrow--next carousel-control right"></a>', responsive: [ { breakpoint: 1300, settings: { rows: 2, slidesToShow: 2, slidesToScroll: 2, } } ] }); }; }; $( window ).resize(function() { initSlick(); }); $(document).ready(function() { initSlick(); }); I decided to make unslick, but the trouble is that when resizing, the slider is not rebuilt. I can not understand how to do unslick first, and then start again. Responsive slick mode does not work. There just breaks the layout.
