bxSlider 切断幻灯片查看移动

Question

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

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

示例页面是：http://joshrodg.com/hallmark/ - 一直在底部的黑暗区域显示 "Latest Media"。

谢谢，
乔什

Answer 1

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

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

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,
    });
}

然后，我们需要在文档首次加载时调用此函数，否则您的计算将仅在 window 调整大小时使用：

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

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

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

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

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

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

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

Answer 2

我的一个朋友帮助我完成了这项工作！

我更新了fiddle：https://jsfiddle.net/785gcrnp/1/

var sm = 20;
var podcastSlider;

function podcastSettings() {
    var minmax;
    var win=$(window).width();

      if(win > 960) {
        minmax=3;
        var sw = 300;
      } else if(win > 660) {
        minmax=2;
        var sw = 300;
      } else {
        minmax=1;
        var sw = 480;
      }

      var sliderSettings={
        adaptiveHeight: true,
        infiniteLoop: false,
        maxSlides: minmax,
        mode: 'horizontal',
        nextSelector: '.next',
        nextText: 'Next',
        pager: false,
        prevSelector: '.prev',
        prevText: 'Prev',
        slideMargin: sm,
        slideWidth: sw
      };

      return sliderSettings;
    }

    $(window).resize(function() {
      podcastSlider.reloadSlider(podcastSettings());
    });

    $(document).ready(function(){
      podcastSlider = $('.podcast').bxSlider(podcastSettings());
    });

这将使幻灯片居中，并且只显示完全可见的幻灯片数量，而不会剪切任何内容。

这也是响应式的，所以如果我调整浏览器的大小，一切都会更新。

此外，我为较小的屏幕指定了不同的宽度。

我希望这对其他人有帮助！

谢谢，
乔什

bxSlider 切断幻灯片查看移动

bxSlider cuts off slide viewing mobile

javascript

css

mobile

jquery

bxslider