slick-responsive.js

jQuery(document).ready(function ($) {
          
          //On load run the function defined below
          slickActionsScreenSize();

          //Run the function on window resize
          jQuery( window ).resize( function() {
               slickActionsScreenSize();
          });

          function slickActionsScreenSize () {

               //Set our target slider to a variable
               var carousel = jQuery('.action-section .actions');

               //If window is less than or equal to 1024px and slick is not
               //already initialized run slick
               if ( window.innerWidth <= 1024 ) {
                    // Slick
                    jQuery('.action-section .actions').not('.slick-initialized').slick({
                         infinite: true,
                         dots: true,
                         responsive: [
                              {
                                   breakpoint: 767,
                                   settings: {
                                        slidesToShow: 1,
                                        slidesToScroll: 1,
                                        // dots: true,
                                   }
                              },
                              {
                                   breakpoint: 1023,
                                   settings: {
                                        slidesToShow: 3,
                                        slidesToScroll: 3,
                                        // dots: true,
                                   }
                              }
                         ]
                    });
               }
                    
               //If window is greater than 1024px and 
               //Slick is active - destroy slick
               if ( window.innerWidth > 1024 ) {
                    if (carousel.hasClass('slick-initialized')) {
                         carousel.slick('unslick');
                    }
               }

          }
}