I have a while loop that display posts using the slick slider multiple items format.

This displays and works with no problems.

I want to be able to 'disable' the slick slider functionality when the viewport is less than 481px and just list the posts.

I have a conditional javascript function (below) to target viewports less than 481px

jQuery(window).on('resize',function()
   {
         var viewportWidth = jQuery(window).width();

         if (viewportWidth < 481)
         {  
         }
         else
         {

         }
   });

I've added some jquery to remove the classes multiple-items, slick-slider and slick-initialized. The slides disappear. I would like to continue to display all the posts.

Can someone please point me in the right direction on how I can deactivate the slick slider functionality when viewing the site on viewports less than 481px?

Full code:

<div id="box" class="multiple-items">
    <?php
    while($search_results_featured_users->have_posts()) : ?>
        <div>
            <a href="<?php the_permalink();?>">
                <h3><?php the_title(); ?></h3>
                <?php the_excerpt(); ?>
            </a>
        </div>
    <?php
    endwhile;
    wp_reset_postdata(); ?>
</div>

<script>
    jQuery(document).ready(function(){

        // on screen resize
        jQuery(window).on('resize',function()
        {
            var viewportWidth = jQuery(window).width();

            if (viewportWidth < 481)
            {
                jQuery("#box").removeClass("multiple-items slick-initialized slick-slider");
            }
            else
            {

            }
        });

        jQuery('.multiple-items').slick({
                infinite: true,
                slidesToShow:6,
                slidesToScroll: 2,
                autoplay: true,
                autoplaySpeed: 5000,
                pauseOnHover: false,
                dots: false,
                arrows: true,
                speed: 500,
                cssEase: 'linear',
            });

    });
</script>

Any help much appreciated.

I have a while loop that display posts using the slick slider multiple items format.

This displays and works with no problems.

I want to be able to 'disable' the slick slider functionality when the viewport is less than 481px and just list the posts.

I have a conditional javascript function (below) to target viewports less than 481px

jQuery(window).on('resize',function()
   {
         var viewportWidth = jQuery(window).width();

         if (viewportWidth < 481)
         {  
         }
         else
         {

         }
   });

I've added some jquery to remove the classes multiple-items, slick-slider and slick-initialized. The slides disappear. I would like to continue to display all the posts.

Can someone please point me in the right direction on how I can deactivate the slick slider functionality when viewing the site on viewports less than 481px?

Full code:

<div id="box" class="multiple-items">
    <?php
    while($search_results_featured_users->have_posts()) : ?>
        <div>
            <a href="<?php the_permalink();?>">
                <h3><?php the_title(); ?></h3>
                <?php the_excerpt(); ?>
            </a>
        </div>
    <?php
    endwhile;
    wp_reset_postdata(); ?>
</div>

<script>
    jQuery(document).ready(function(){

        // on screen resize
        jQuery(window).on('resize',function()
        {
            var viewportWidth = jQuery(window).width();

            if (viewportWidth < 481)
            {
                jQuery("#box").removeClass("multiple-items slick-initialized slick-slider");
            }
            else
            {

            }
        });

        jQuery('.multiple-items').slick({
                infinite: true,
                slidesToShow:6,
                slidesToScroll: 2,
                autoplay: true,
                autoplaySpeed: 5000,
                pauseOnHover: false,
                dots: false,
                arrows: true,
                speed: 500,
                cssEase: 'linear',
            });

    });
</script>

Any help much appreciated.

• javascript
• jquery
• wordpress
• viewport
• slick.js

3 Answers 3

You can destroy Slick slider with unslick method

$(element).slick('unslick');

for example

jQuery(window).on('resize', function() {
    var viewportWidth = jQuery(window).width();

    if (viewportWidth < 481) {
        $('.multiple-items').slick('unslick');
    } else {
        // Do some thing
    }
});

responsive: [
    {
        breakpoint: 4000,
        settings: "unslick",
    },
]

this option disabled slider on resolution from 0-4000px , and you can ON slider on example 1024px , this be :

responsive: [
    {
        breakpoint: 4000,
        settings: "unslick",
        ...
    },
{
        breakpoint: 1024,
        settings: "slick",
        ...
    },
]

Here is the correct unslick, with no errors in console. On pure JS. For me works like a charm.

var $carousel = $(".multiple-items");
function showSliderScreen($widthScreen) {
    // console.log($widthScreen);

    if ($widthScreen <= "481") {
        if (!$carousel.hasClass("slick-initialized")) {
            $carousel.slick({
              infinite: true,
              slidesToShow: 6,
              slidesToScroll: 2,
              autoplay: true,
              autoplaySpeed: 5000,
              pauseOnHover: false,
              dots: false,
              arrows: true,
              speed: 500,
              cssEase: 'linear',
            });
        }
    } else {
        if ($carousel.hasClass("slick-initialized")) {
            $carousel.slick("unslick");
        }
    }
}

var widthScreen = $(window).width();
$(window).on("ready load resize", function () {
  widthScreen = $(window).width();
  showSliderScreen(widthScreen);
});

I found it here: https://github.com/kenwheeler/slick/issues/369#issuecomment-57332974