页面上有多个弹性滑块的奇怪闪烁背景

Question

我有一个只有 1 页且有多个部分的网站，每个部分都包含一个内容 DIV 和一个 flexslider。在较大的屏幕上，似乎存在一个奇怪的错误，导致背景随幻灯片动画闪烁，具体操作如下： http: //yyy.comuf.com/PORT/

我认为这是因为页面上有多个 Flexslider，但不确定修复它的最佳方法。

JS

  $(window).load(function() {
$('#main-slider').flexslider({
  animation: 'slide',
  controlsContainer: '.flex-container'
});

$('#secondary-slider').flexslider();

});

HTML 滑块-1

<div id="main-slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="img/FP1.png" />
    </li>
    <li>
      <img src="img/abcd.png" />
    </li>
    <li>
      <img src="img/i-eg.png" />
    </li>
  </ul>
</div>

HTML 滑块-2

<div id="secondary-slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="img/OU.png" />
    </li>
    <li>
      <img src="img/OU1.png" />
    </li>
    <li>
      <img src="img/OU2.png" />
    </li>
  </ul>
</div>

目前，两个滑块除了图像不同之外都是相同的。

主要JS文件在这里：http ://yyy.comuf.com/PORT/js/jquery.flexslider.js

Answer 1

这是由于 css3 3d 转换中的许多错误导致的问题，您可以使用新参数

使用CSS：假

包含在新的插件版本中。此选项强制新浏览器（webkit 之一，实现 css 转换）使用 jquery 4 动画。我是这样解决的。我仅在使用 Chrome 版本 21 时遇到此问题，但在 Safari 6 上则不会。