0

我在 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>

4

3 回答 3

4

我也在寻找解决方案，这个解决方案甚至在 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]-->
...
于 2013-08-27T10:11:58.803 回答
1

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

于 2013-12-04T12:34:27.367 回答
0

在 gitHub 上有对此的修复，拉取请求被拒绝但效果很好：https ://github.com/twbs/bootstrap/pull/3052/files

于 2013-06-28T21:58:59.870 回答