2

当我添加 response.js 时，我似乎无法让 Owl Carousel 在 IE8 中工作。有没有其他人能够做到这一点？我什至不知道从哪里开始故障排除。

我指的jQuery轮播插件是：http: //owlgraphic.com/owlcarousel/

4

2 回答 2

2

我知道这个问题有点老了，但我今天遇到了 IE8 和 Owl Carousel 的问题（希望这是一个类似的问题），并认为这可能对将来的某人有所帮助。

问题：由于页面会在几个轮播中呈现项目，所以我设置的项目会溢出轮播容器之外。一旦我调整页面大小，所有内容都会呈现为正确的位置和大小。这可能是由 .resize() 引起的，这可能会导致 IE 出现问题。

解决方案： 我在 IE 条件内的 ie.css 文件旁边运行了 respond.js。我也在条件中运行 html5shiv 。

<!--[if lt IE 9]>
    <link href="css/ie.css" rel="stylesheet" type="text/css"/>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

然后在我的css中，我会给每个轮播ID一个固定的宽度。如果您查看演示猫头鹰轮播（我无法制作主体 [效果也很好]，因为我的背景颜色是全角的）：

<div id="owl-example" class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
  ...
</div>

在我的 ie.css 文件中，我只是为该 ID 设置了一个宽度

#owl-example{width: 1024px;}

这样做之后，我的页面将正确呈现，并且 Owl Carousel 将正常工作。就像亚当在上面的评论中提到的那样，如果有人使用 IE8，他们可能不知道什么是响应式的，所以我的感觉是设置宽度应该让用户满意，并且你总是可以在 IE8 中锻炼，因为 response.js 正在工作在所需的断点处进行媒体查询。希望这会有所帮助。

于 2014-06-02T22:18:12.333 回答
1

我有类似的问题。Owl Carousel 有一个内置的数据方法“reinit”。加载完所有内容后，我刚刚重新初始化了 Owl 轮播。但它需要一些延迟（我不知道方法：s）。但是这个解决方案对我有用。

var owl = $("#owl-wrap").data('owlCarousel');

if( $('html').hasClass('no-backgroundsize') )
{
  $(window).load(function() {
    window.setTimeout(function() {
      owl.reinit();
    }, 250);
  });
}

类名“no-backgroundsize”来自 Modernizr。因为 IE8 不支持 background-sizing，所以我认为这将是检测 IE8 的好方法。

于 2014-07-21T14:11:15.223 回答