javascript - 如何使 bxslider 仅在移动 View 上处于事件状态？

Question

所以是这样的:我有一个简单的图库，5 张图片堆叠在一行中。在某些断点之后，这个画廊必须成为一个图像 slider (使用 BxSlider)。这是我的 html:

<section class="gallery clearfix">
    <a class="fancybox" href="images/pic1.png"><div class="sprite pic1"></div></a>
    <a class="fancybox" href="images/pic2.png"><div class="sprite pic2"></div></a>
    <a class="fancybox" href="images/pic3.png"><div class="sprite pic3"></div></a>
    <a class="fancybox" href="images/pic4.png"><div class="sprite pic4"></div></a>
    <a class="fancybox" href="images/pic5.png"><div class="sprite pic5"></div></a>
</section>

我为图像使用了 sprite。

Answer 1

我已经检查了@dowomenfart 提供的解决方案，但如果我们多次调整窗口大小，它将重新安装 slider ，正如@DrKey 在评论中提到的那样。所以这是摆脱这个的解决方案

$(document).ready(function(){
    var width = $(window).width();
    $(window).resize(function(){
        var width = $(window).width();
        slider(width);
    });
    slider(width);
});

function slider(width) 
{
   if(width <= 400)    // change it here 
   {
        if(window.sldr!=undefined)
        {               
            window.sldr.destroySlider();
        }

        window.sldr=$('.bxslider').bxSlider();
   }else
   {
        window.sldr.destroySlider();
   }
}

我们需要在条件结束后销毁 slider