jquery - bxslider 在无限循环中显示空白空间

Question

我以这种方式在我的项目中添加了一个 bxslider：jquery：

$(document).ready(function () {
        $('.bxslider').bxSlider({
            minSlides: 2,
            maxSlides: 3,
            slideWidth: 340,
            moveSlides: 1,
            slideMargin: 0,
            infiniteLoop: true
        });

HTML部分：

<div style="width:100%;float: left; position: relative; bottom: 17px;">
    <ul class="bxslider" id="slider1" >
        <li style="float: left; list-style: none outside none;width:340px !important;">
<img src="/Content/images/home.png" alt="home" width="340"height="239" />
</li>
<li style="float: left; list-style: none outside none;width:340px !important;">
<img src="/Content/images/home1.png" alt="home1" width="340"height="239" />
</li>
<li style="float: left; list-style: none outside none;width:340px !important;">
<img src="/Content/images/home2.png" alt="home2" width="340"height="239" />
</li>
</ul>
</div>

当我们单击下一个按钮时，我们会看到图像在滑块中 1 个 1 移动。当滑块的所有图像完成后，它会再次从第一个图像开始旋转 - 在这种情况下，我们会看到一个小的“空白区域”然后是第一张图片。我们想要一个平滑的循环循环工作，而不会看到任何空白空间。

上述问题的链接是

http://neelamsharma.s3.amazonaws.com/simplehtml/testing/testing.html

谁能告诉我这个的解决方案？这将是非常可观的

提前感谢您的帮助！

Answer 1

使用“代码”。像这样：

$( '.bxslider' ).bxSlider( {
      pager: false,
      slideMargin: 30,
      controls: false,
      speed: 50000,
      useCSS: false,
      ticker: true,
      tickerHover: true,
      slideWidth: 300,
      responsive: false,
      minSlides: 2,
      maxSlides: 100,
  } );

这将产生新闻行情或从左到右连续馈送的效果。如果这不起作用，则说明您的 CSS 有问题。为此，我没有围绕我的 HTML 编写任何样式。jQuery 中只有这些 bxslider 设置。

Answer 2

使用标签元素对我有用backface-visibility: hidden。li