Question

我有一个while循环，使用slick slider多项目格式显示帖子。

这显示并且没有任何问题。

我希望能够在视口小于481像素时“禁用”光滑的滑块功能，并且只列出帖子。

我有一个条件javascript函数（下面）来定位小于481px的视口

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

         if (viewportWidth < 481)
         {  
         }
         else
         {

         }
   });

我添加了一些jquery来删除类多项，光滑滑块和光滑初始化。幻灯片消失了。我想继续显示所有帖子。

有人可以指出我在正确的方向上指出如何在低于481像素的视口上查看网站时停用光滑的滑块功能吗？

完整代码：

<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>

任何帮助非常感谢。

Answer 1

您可以使用unslick方法

销毁Slick滑块

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

例如

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

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

当视口小于481px时，禁用光滑滑块

1 个答案: