BX 滑块，从第一张幻灯片过渡到最后一张幻灯片闪烁（向右然后返回原始）

Posted 2023-03-06

【中文标题】BX 滑块，从第一张幻灯片过渡到最后一张幻灯片闪烁（向右然后返回原始）

【英文标题】：BX slider, transition from first to last slide flickers(goes right then come back to original)

【发布时间】：2014-10-15 08:22:35

【问题描述】：

以下是我简单实现 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。

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

有人知道吗？

提前致谢。

【参考方案1】：

我是这样解决的：

$('.bxslider').bxSlider( 自动：是的， 使用CSS：假 );

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

【参考方案2】：

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

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

请看这里iPhone WebKit CSS animations cause flicker

【参考方案3】：

我已经修好了..如果其他人需要..

我已经添加了

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

在下面的函数中，你可以在 BxSlider v4.1.2(jquery.bxslider.js) 的第 1 行找到这个函数。 535 及以上修复添加在第 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

【讨论】：

修改插件是大错特错。你在 github 上提出过 pull request 吗？

【参考方案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;