3

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.

2 Answers 2

14

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
    }
});
1
  • For me using the 1.3.15 version, it worked using only the function $(element).unslick(); Jun 25, 2020 at 13:37
0
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",
        ...
    },
]
1
  • 2
    Your answer could be improved by adding more information on what the code does and how it helps the OP.
    – Tyler2P
    Apr 22, 2022 at 18:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.