Twitter Bootstrap 2.0 Carousel and IE transition problems

2
votes

I know that this has been an ongoing issue for some with the slide transition not working in IE. The solution I'd seen here on SO several times and around the web is to add the class slide to the myCarousel div. So, I visited the Bootstrap website and copied and pasted the code for a standard carousel into my webpage, and...no transitioning in IE. I even went to Twitter Bootstrap's Carousel page in IE, and guess what? No transition in IE9 and below on their own page, and they are even adding the class slide to the myCarousel div. Has this situation come up for others with Bootstrap 2.0 (I am using the latest copy of JQuery on my page, 1.8.0, if this makes a difference. Also, I am using a customized version of Bootstrap with transitions and carousel bundled into the bootstrap.js file). Here is the code I copied and pasted, modified for my own images:

<div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
          <div class="item active">
            <img src="img/CRC615_LivingRoom_cropped.jpg" alt="A living room with wrap around balcony and view of Gulf of Mexico at Caribe Resort">
            <div class="carousel-caption">
              <h4>First Thumbnail label</h4>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
          </div>
          <div class="item">
            <img src="img/OutcastCharterDocks-rentals-charters-cruises.jpg" alt="Outcast Marina in Orange Beach offers vacationers parasailing and jetski rentals">
            <div class="carousel-caption">
              <h4>Second Thumbnail label</h4>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
          </div>
          <div class="item">
            <img src="img/CobaltRestaurantOrangeBeach.jpg" alt="">
            <div class="carousel-caption">
              <h4>Third Thumbnail label</h4>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
      </div>
2
internet-explorertwitter-bootstrapcarouseltransitions
the same issue You can try this link for sliding in IE7-IE9; – Josua Marcel C

2 Answers

3
votes

It's fixed now please get the latest version of bootstrap or what I did since I already done it with older version check here http://tutewall.com/bootstrap-carousel-transition-fixed/

2
votes

The Carousel Plugin for Twitter Bootstrap uses CSS3 Transitions. IE9 does not support CSS3 Transitions.

If you want transitions in IE you need to find a shim or some code modification (as suggested in a comment) to add in the support.