Used with flexible content. Optional: Unslick slider code on resize.
function featuredCardSlider() {
$( '.featured-cards-slider' ).each( function() {
$( this ).slick( {
touchThreshold: 20,
mobileFirst: true,
slidesToShow: 1,
speed: 500,
arrows: false,
fade: false,
dots: true,
appendDots: $( this ).parent().find( '.featured-cards-slider-dots' ),
responsive: [
{
breakpoint: 768,
settings: "unslick"
}
]
} );
} );
}
if ( $( window ).innerWidth() < 768 ) {
featuredCardSlider();
}
// Use this only when we need to unslick or reinitialize slider
$( window ).on( 'resize orientationchange', function() {
if ( $( this ).innerWidth() < 768 ) {
if ( !$( '.featured-cards-slider' ).hasClass( 'slick-initialized' ) ) {
featuredCardSlider();
}
} else {
if ( $( '.featured-cards-slider' ).hasClass( 'slick-initialized' ) ) {
$( '.featured-cards-slider' ).slick( 'unslick' );
}
}
} );