How to make arrows added at resolution 480 in main-slider ? If I do it, then everything hangs and does not load the photo
responsive: [ { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: true } } ] Slider initialization
$('.main-slider').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, initialSlide: 0, arrows: false, asNavFor: '.thumb-slider', }); $('.thumb-slider').slick({ infinite: true, slidesToShow: 4, slidesToScroll: 1, focusOnSelect: true, arrows: true, nextArrow: '<span class="arrow-next" id="arrow-next"></span>', prevArrow: '<span class="arrow-prev"></span>', asNavFor: '.main-slider', centerMode: false, vertical: true, responsive: [ { breakpoint: 1600, settings: { slidesToShow: 3, slidesToScroll: 1, } }, { breakpoint: 992, settings: { slidesToShow: 2, slidesToScroll: 1, } }, { breakpoint: 768, settings: { slidesToShow: 3, slidesToScroll: 1, } }, { breakpoint: 480, settings: { slidesToShow: 2, slidesToScroll: 1, } } ] });