In cases where the viewport is resized ABOVE the mobile bp it works, but when the viewport is resized to desktop slick does not initialize. You can use below code to work the slick properly
HTML
<section class="responsive slider">
<div><img src="http://placehold.it/350x300?text=1" /></div>
<div><img src="http://placehold.it/350x300?text=2" /></div>
<div><img src="http://placehold.it/350x300?text=3" /></div>
<div><img src="http://placehold.it/350x300?text=4" /></div>
<div><img src="http://placehold.it/350x300?text=5" /></div>
<div><img src="http://placehold.it/350x300?text=6" /></div>
</section>
Javascript
<script type="text/javascript">
jQuery(document).ready(function(){
$slick_slider = jQuery('.responsive');
settings = {
dots: true,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
arrows: true,
prevArrow: '<a class="slick-prev"><i class="fas fa-arrow-left"></i></a>',
nextArrow: '<a class="slick-next"><i class="fas fa-arrow-right"></i></a>',
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: true,
dots: true
}
},
{
breakpoint: 810,
settings: "unslick"
}
]
}
$slick_slider.slick(settings);
// reslick only if it's not slick()
jQuery(window).on('resize', function() {
if (jQuery(window).width() < 810 ) {
if ($slick_slider.hasClass('slick-initialized')) {
$slick_slider.slick('unslick');
}
return
}
if (!$slick_slider.hasClass('slick-initialized')) {
return $slick_slider.slick(settings);
}
});
});
</script>
