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

Question

I can't seem to get Owl Carousel to work in IE8 when I add respond.js. Has anyone else been able to do this? I don't even know where to start troubleshooting.

The jQuery carousel plugin I'm referring to is: http://owlgraphic.com/owlcarousel/

Answer 1

I know this question is a bit old but I had an issue with IE8 and Owl Carousel today (hopefully this is a similar issue) and thought maybe this could help someone in the future.

Problem: As the page would render items in several carousels I had set up the items would overflow outside of the carousel container. As soon as I would resize the page everything would then render into it's correct position and size. This can be caused by .resize() which can cause issues with IE.

Solution: I ran respond.js along side an ie.css file inside of an IE conditional. I also run html5shiv as well inside the conditional.

<!--[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]-->

Then in my css I would give a fixed width to each carousel ID. If you look at the demo owl carousel (I couldn't do the body [which works as well] because I had background colors that were full-width):

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

And in my ie.css file I just set a width to that ID

#owl-example{width: 1024px;}

After doing that my page would render correctly and Owl Carousel would work properly. Like was mentioned in the comments above by Adam, if someone is using IE8 they probably don't know what responsive is, so my feeling is setting a width should be satisfactory for users and you can always muscle in IE8 since respond.js is working with media queries at desired break points. Hopefully this helps.

Answer 2

I had similar issue. Owl Carousel has a build-in data method "reinit". I just reinitialized Owl carousel after all content has been loaded. But it needed some delay (I don't know way :s). But this solution worked for me.

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

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

The class name "no-backgroundsize" comes from Modernizr. Because IE8 doesn't support background-sizing, I thought that it would be good way to detect IE8.