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;
}

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

4 个答案: