使用 IE 8 在 Twitter Bootstrap 中制作轮播滑动或淡入淡出答案

【问题标题】：Making Carousel Slide or Fade in Twitter Bootstrap with IE 8使用 IE 8 在 Twitter Bootstrap 中制作轮播滑动或淡入淡出
【发布时间】：2015-02-10 19:37:11
【问题描述】：

我在 Twitter Bootstrap 中制作了 Carousel，它在除 IE 之外的所有浏览器中都可以正常工作（滑动）。现在，我真的很努力让它在IE中工作，如果不滑动，那么至少它可能会淡入/淡出。

这就是我所做的：

$('#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();


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module colored home-solutions primary-two-background">


  <div id="myCarouselforsolutions" class="carousel slide">
    <div class="carousel-inner carousel-inner-at-home">


      <div class="content-container">

        <h1 id="num-solutions"></h1>
        <h2>SOLUTIONS</h2>
        <div id="swipe-container-home-solutions">

          <div class="item active" id="solutions-slide-dimensions">

            <div class="solution-preview" value="primary-two-background">
              <a href="/Index/solutions/periscope/">
                <h2>Periscope</h2>
              </a>
              <p>
                Improves return on sales through better pricing, promotions, assortment, and performance management</p>
            </div>

          </div>

          <div class="item" id="solutions-slide-dimensions">

            <div class="solution-preview" value="primary-five-background">
              <a href="/Index/solutions/objective-health/">
                <h2>Objective Health</h2>
              </a>
              <p>Supports community hospitals and small regional systems to improve their cost performance and strategy</p>
            </div>

          </div>



        </div>

      </div>



    </div>
    <a class="arrow arrow-left hidden-phone" href="#myCarouselforsolutions" data-slide="prev"></a>
    <a class="arrow arrow-right hidden-phone" href="#myCarouselforsolutions" data-slide="next"></a>
  </div>



</div>

【问题讨论】：

标签： jquery css twitter-bootstrap carousel

【解决方案1】：

我也在寻找解决方案，这个解决方案甚至在 Bootstrap 3 上也帮助了我： https://github.com/tybruffy/ie-bootstrap-carousel - 在此处下载 ie-bootstrap-carousel.min.js，然后在 bootstrap.min.js 之后包含它：

<body>
<!-- Bootstrap -->
    <script src="bootstrap/js/bootstrap.min.js"></script>   
<!-- /Bootstrap -->
...    
<!--[if lte IE 9]>       
    <script src="ie/ie-bootstrap-carousel.min.js"></script>
<![endif]-->
...

【讨论】：

更新 - 我的编辑效果更好 - github.com/logvynenko/ie-bootstrap-carousel/commit/…

【解决方案2】：

Oleksandr Logvynenko 的解决方案绝对是一个好的开始，但他提供的链接在 ie9、ie8 上不起作用您可以改用这个 JS（感谢 Barry vd. Heuvel） https://gist.github.com/barryvdh/6155151

【讨论】：

【解决方案3】：

在 gitHub 上有一个解决方案，拉取请求被拒绝但效果很好：https://github.com/twbs/bootstrap/pull/3052/files

【讨论】：