BX滑块，从第一个到最后一个幻灯片的过渡闪烁（向右然后再回到原始状态）

Question

以下是我为BX滑块简单实现的代码：

var slider = $('#bxslider').bxSlider();

<ul id="bxslider">
    <li>
        <img class="carouselimage" src="images/01e_image.jpg" />

    </li>
    <li >
        <img class="carouselimage" src="images/01c_image.jpg" />

    </li>
    <li >
        <img class="carouselimage" src="images/01a_image.jpg" />

    </li>
</ul>

我已经正确使用了所有内容，没有额外的CSS和JS。

当我通过单击左箭头从头到尾（反向）进行转换时，最后一张幻灯片向右移出容器一秒钟然后回到原始状态，看起来像一个闪烁。

有人有任何线索吗？

提前致谢。

Answer 1

我这样解决它：

$（'。bxslider'）。bxSlider（{auto：true，useCSS：false}）;

（感谢https://github.com/stevenwanderski/bxslider-4/issues/127上的stevenwanderski）

Answer 2

我的同事有这个问题，她在bxslider上使用了这个

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

看到这里iPhone WebKit CSS animations cause flicker

Answer 3

我得到了这个固定..如果有人需要..

我已经添加

"if (0===value) value=-40;// fix for flickering issue 2208141730"

在以下函数中，您可以在第4行的BxSlider v4.1.2（jquery.bxslider.js）中找到此函数。在第5行添加了535及以上的修复程序。 539

var setPositionProperty = function(value, type, duration, params){
    // use CSS transform
    if(slider.usingCSS){
        // determine the translate3d value
        if (0===value) value=-40;// fix for flickering issue 2208141730

Answer 4

在bxslider插件中更新：

var setPositionProperty = function(value, type, duration, params){
  // use CSS transform
  if(slider.usingCSS){
    // determine the translate3d value
    var propValue = slider.settings.mode == 'vertical' ? 'translateX(' + value + 'px)' : 'translateX(' + value + 'px)';

添加新的CSS

.bx-viewport ul{
   backface-visibility: visible;
   perspective: 2000;
   -webkit-perspective: 2000;
   -webkit-backface-visibility: visible;
}