0

我的 bxSlider 水平跨越 100% 的浏览器宽度 - 多个（图像）幻灯片显示在视口中，选项中设置了“moveSlides：1”。

共有 8 张幻灯片正在旋转。当我单击“下一步”箭头浏览它们时，最后发生了一些奇怪的事情。当第 8 张幻灯片最初从右侧进入视口并继续单击时，它的右侧没有显示任何图像，直到它再次从左侧循环出来，此时幻灯片 #1-3 突然出现在他们应该按顺序排列。从那里开始，循环重复，一旦幻灯片 #8 再次进入视口，就会发生相同的情况。

基本上，我希望幻灯片 #1 等在它们应该出现在视口中时立即出现在幻灯片 8 的右侧，而不会出现这种滞后。检查 CSS 后，我很确定这是关闭视口计算的问题（特别是 .bx-viewport 的“左”位置）。

如何修改 jquery.bxslider.js 中的这个特定计算（幻灯片阵容的包装）？还是我应该采取另一种方法，一种不需要调整视口计算的方法？

我已经包含了代码并在此处复制了问题：http: //jsfiddle.net/astewes/S7L2n/1/

我正在使用带有以下选项的 bxSlider：

jQuery(document).ready(function($){
  $('ul#homepage.bxslider').bxSlider({
    controls: true,
    displaySlideQty: 5,
    pager: false,
    startingSlide: 0,
    moveSlideQty: 1,
    infiniteLoop: true,
    preloadImages: 'all',
    adaptiveHeight: true,
    captions: false
  });
});

编辑：我已经更新了我正在使用的选项列表。我已经能够减少上述延迟，但是当循环回到图像 #1 时，滑块的行为仍然很奇怪。displaySlideQty事实证明，它在减少延迟时间方面很有用，尽管我不赞成完全依赖它的想法。幻灯片之间的空间也关闭（对于纵向大小的图像），但这可能是因为我正在使用纵向和横向的组合。我尝试过动态改变肖像图像的宽度，但是使用display: tableand display: table-cell（使所有内容居中）使这种方法毫无用处。

4

0 回答 0