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>

我使用精灵来制作图像。

Answer 1

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

我们需要在条件

之后销毁滑块

Answer 2

将您的bxslider电话放入$(window).resize()

<强> JSFIDDLE DEMO

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

我为窗口大小添加400，但您可以更改它以获得所需的外观。

Answer 3

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

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

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

仅当设备宽度小于768px时才会调用bx滑块。您必须通过css管理桌面或平板电脑设备中的所有5个图像。

Answer 4

取自this answer

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

如何让bxslider仅在移动视图上激活？

4 个答案: