title: Making Carousel Slide or Fade in Twitter Bootstrap with IE 8
body: <p>I have made Carousel in Twitter Bootstrap and it's working fine (sliding) in all the browsers except IE. Now, I am really trying hard to make it work in IE, if not slide then at least it may fade-in / fade-out.</p>
  
  <p>This is what I did:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#myCarouselforsolutions').carousel({
    interval: 3000
  });
  
  var slideFrom;
  var slideTo;
  $('#myCarouselforsolutions').on('slide', function(e) {
    slideFrom = $(this).find('.active').index();
    slideTo = $(e.relatedTarget).index();
  
  
    if (typeof slideTo == "undefined") {
      slideTo = 2;
    }
    //console.log ("slide To " + slideTo + " and From " + slideFrom);
    $('.media-module').removeClass('primary-one-background')
      .removeClass('primary-two-background')
      .removeClass('primary-three-background')
      .removeClass('primary-four-background')
      .removeClass('primary-five-background')
      .addClass($(solution_list[slideTo]).attr('value'));
  });
  
  
  
  $("#prev-solution, #next-solution").click(function(e) {
    //e.preventDefault();
  
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="module colored home-solutions primary-two-background"&gt;
  
  
    &lt;div id="myCarouselforsolutions" class="carousel slide"&gt;
      &lt;div class="carousel-inner carousel-inner-at-home"&gt;
  
  
        &lt;div class="content-container"&gt;
  
          &lt;h1 id="num-solutions"&gt;&lt;/h1&gt;
          &lt;h2&gt;SOLUTIONS&lt;/h2&gt;
          &lt;div id="swipe-container-home-solutions"&gt;
  
            &lt;div class="item active" id="solutions-slide-dimensions"&gt;
  
              &lt;div class="solution-preview" value="primary-two-background"&gt;
                &lt;a href="/Index/solutions/periscope/"&gt;
                  &lt;h2&gt;Periscope&lt;/h2&gt;
                &lt;/a&gt;
                &lt;p&gt;
                  Improves return on sales through better pricing, promotions, assortment, and performance management&lt;/p&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
  
            &lt;div class="item" id="solutions-slide-dimensions"&gt;
  
              &lt;div class="solution-preview" value="primary-five-background"&gt;
                &lt;a href="/Index/solutions/objective-health/"&gt;
                  &lt;h2&gt;Objective Health&lt;/h2&gt;
                &lt;/a&gt;
                &lt;p&gt;Supports community hospitals and small regional systems to improve their cost performance and strategy&lt;/p&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
  
  
  
          &lt;/div&gt;
  
        &lt;/div&gt;
  
  
  
      &lt;/div&gt;
      &lt;a class="arrow arrow-left hidden-phone" href="#myCarouselforsolutions" data-slide="prev"&gt;&lt;/a&gt;
      &lt;a class="arrow arrow-right hidden-phone" href="#myCarouselforsolutions" data-slide="next"&gt;&lt;/a&gt;
    &lt;/div&gt;
  
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>