javascript - bxSlider 切断幻灯片查看移动

Question

我正在使用 bxSlider，它运行良好......我在某些功能上遇到了一个小问题......当我在移动设备上查看幻灯片时，它显示 1.5......基本上是一个完整的幻灯片然后是下一张的一部分。在代码中，我将 minSlides 设置为 1，将 maxSlides 设置为 3...我想要做的是显示 bxSlider一个特定的 li 仅当整个 li 适合屏幕时。例如，我的 div 宽度为 300 像素，为了显示其中两个，您的屏幕尺寸必须至少为 600 像素宽...这可能吗？

我创建了一个 fiddle :https://jsfiddle.net/785gcrnp/ .

示例页面是:http://joshrodg.com/hallmark/ - 一直在底部的黑色区域，上面写着“最新媒体”。

谢谢，
乔希

Answer 1

很好，看起来你取得了一些不错的进步。有一种方法可以将当前代码包装在一个函数中，并在窗口调整大小或方向改变时调用它。

这是包装在函数中的样子:

function adjustSlider(){
    var sw = 200;
    var sm = 20;
    var ms = Math.floor($('#nocrop').width() / (sw + sm));
    $('#nocrop .bxslider').bxSlider({
        pager: false,
        slideWidth: sw,
        slideMargin: sm,
        maxSlides: ms > 1 ? ms : 1,
    });
}

然后，我们需要在文档首次加载时调用此函数，否则您的计算只会在窗口调整大小时使用:

$(document).ready(function(){
    adjustSlider();
});

然后，我们添加一个窗口调整大小事件。我将对 adjustSlider 函数的调用放在计时器中，这样如果窗口在短时间内调整了很多大小，它就会有所帮助。我们也可以在这里添加 onorientationchange 事件来进行相同的调用。方向更改有自己内置的延迟，并且此事件不会像调整窗口大小那样频繁触发，所以我没有将其放入计时器中。

$(window).resize(function(){
    setTimeout(function(){
        adjustSlider();
    }, 250);
});

window.onorientationchange = function(event){
    adjustSlider();
}

定时器的 250 毫秒可能有点高，请随意调整。在 jsfiddle 上调整 Pane 大小时，它对我来说仍然感觉很重。这可能是由于 javascript 在 jsfiddle 中的运行方式，或者可能与此 slider 处理其属性设置的方式有关。它会在您的实际站点上显示得最好，因此请在那里进行一些测试以确保速度和性能不会成为问题。让我知道事情的后续!

此外，这里有一个有效的 jsfiddle，用于展示将它们放在一起时的外观示例:http://jsfiddle.net/sm1215/0517f76w/4/

编辑:话说，哇哦还将 onorientationchange 放在调整大小事件中，这是行不通的。这是固定的，我已经更新了 fiddle 。