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

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

JS

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

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


});

HTML SLIDER-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 SLIDER-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

最佳答案

由于css3 3d转换中存在许多错误,因此出现了问题,您可以使用新参数

useCSS:false

包含在新的插件版本中。此选项会强制新的浏览器(实现CSS转换的Webkit一个)使用jquery 4动画。我解决了这种方式。
我仅在21版Chrome中遇到此问题,而在Safari 6中则没有。

09-30 17:44
查看更多