Question

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

我创造了一个小提琴：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 ms可能有点高，随意调整。在调整jsfiddle上的窗格时，它对我来说仍然很重要。这可能是由于javascript如何在jsfiddle中运行，或者它可能与此滑块处理它的属性设置的方式有关。它会在您的实际网站上展示最佳，因此在那里进行一些测试以确保速度和性能不会成为问题。让我知道事情的后续！

另外，这里有一个工作的jsfiddle，它是一个放在一起时所有外观的例子：http://jsfiddle.net/sm1215/0517f76w/4/

编辑：单词，woops也将onorientationchange放在resize事件中，这不会起作用。这是固定的，我已经更新了小提琴。

Answer 2

我的一位朋友帮助我解决了这个问题！

我更新了小提琴：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切断幻灯片查看移动版

2 个答案: