Question

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

我所指的jQuery carousel插件是：http://owlgraphic.com/owlcarousel/

Answer 1

我知道这个问题有点陈旧但我今天遇到了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将正常工作。就像Adam在上面的评论中提到的那样，如果有人使用IE8，他们可能不知道响应是什么，所以我的感觉是设置宽度应该对用户来说是满意的，并且你总是可以在IE8中使用，因为response.js正在处理所需断点处的媒体查询。希望这会有所帮助。

Answer 2

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

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

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

班级名称＆＃34; no-backgroundsize＆＃34;来自Modernizr。因为IE8不支持背景大小调整，所以我认为这是检测IE8的好方法。

在IE8中使用带有Respond.js的Owl Carousel

2 个答案: