javascript - Bxslider“重启”错误

Question

我在网站上实施的轮播出现问题：从最后一张照片到第一张照片时，

• 滑块以与通常方向相反的方向环绕所有照片

• 之后，它会闪烁我在去第一张照片之前开始的那个。这是 HTML：

    <div class="row" style="margin-top: 25px;">
        <div class="bxslider">
            <div><img src="img/diapo1.jpg"></div>
            <div><img src="img/diapo2.jpg"></div>
            <div><img src="img/diapo3.jpg"></div>
        </div>
    </div>
  

这是 bxslider js：

  $(document).ready(function(){ $('.bxslider').bxSlider(); });

谁能帮我找出问题所在？感谢您的帮助。

编辑 ：

我也有一些 CSS 来塑造 bxslider 视口和图像，也许这会导致问题？

.bx-wrapper, .bx-viewport, .bx-wrapper img {width: 1100px !important;}
.bx-wrapper, .bx-viewport{height: 450px !important}
.bx-wrapper .bx-controls-direction .bx-prev {
    left: 10px !important;
    background-position: auto;
    -webkit-transition: .4s;
    transition: .4s;
}
.bx-wrapper .bx-controls-direction .bx-next {
    right: 10px !important;
    background-position: auto;
    -webkit-transition: .4s;
    transition: .4s;
}
.bx-next:hover, .bx-prev:hover{
    opacity: 0.7;
}

标签： javascripthtmljquerybxslider

Answer 1

使用 bxSlider 选项...

$('.bxslider').bxSlider({
  auto: true,
  autoControls: true,
  stopAutoOnClick: true,
  pager: true,
  slideWidth: 600
});

阅读有关启动/停止控制的更多信息