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

使用“ ticker”。像这样：

$( '.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设置。

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

1 个答案: