4

我有一个 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 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

4

2 回答 2

3

另一种选择是使用

-webkit-transform: translateZ(0);

将其应用于容器元素。

我在这里找到了答案： https ://stackoverflow.com/a/16718476/1031184

它对我来说非常有效。这也意味着您可以使用 cssTransitions，据我了解，这在移动设备上资源较少。

于 2013-09-15T19:43:17.200 回答
3

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

使用CSS：假

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

于 2012-09-03T11:20:35.607 回答