我有一个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中则没有。