如何使 bxslider 仅在移动视图上处于活动状态？

Question

原来是这样的：我有一个简单的图库，5 张图片堆叠在一行中。在某些断点之后，这个画廊必须成为一个图像滑块（使用 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

将您的 bxslider 调用放入 $(window).resize()

JSFIDDLE DEMO

$(document).ready(function(){
    $(window).resize(function(){
        console.log($(window).width());
        if($(window).width() <= 400){
           $('.bxslider').bxSlider();
        }
    });
});

我将 400 设置为 window 尺寸，但您可以更改它以获得所需的外观。

Answer 2

在小分辨率下，您可以调用 bx 滑块，如下所示

$(document).ready(function(){
if(($(window).width()) < 768)
{
     $('.bxslider').bxSlider();
}
});

$(window).resize(function(){
if(($(window).width()) < 768)
{
     $('.bxslider').bxSlider();
}
});

只有当设备宽度小于768px时才会调用bx slider。您必须 css 管理桌面或平板设备中的所有 5 张图像。

Answer 3

取自this answer

$(document).ready(function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    $('.bxslider').bxSlider();
}
});

Answer 4

我已经检查了@dowomenfart 提供的解决方案，但如果我们多次调整 window 的大小，它将重新安装滑块，正如@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();
   }
}

我们需要在条件

之后销毁滑块

如何使 bxslider 仅在移动视图上处于活动状态？

How to make bxslider active only on mobile view?

javascript

css

bxslider