使用IE 8在Twitter引导程序中制作旋转木马滑动或淡入淡出

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

我也在寻找一个解决方案，这个解决方案甚至在Bootstrap 3上也帮助了我：https://github.com/tybruffy/ie-bootstrap-carousel-在此处下载即bootstrap.min.js，然后在bootstrap.mini.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]-->
...

Oleksandr Logvynenko的解决方案无疑是一个良好的开端，但他给出的链接在ie9、ie8上不起作用您可以使用此JS（感谢Barry vd.Huevel）https://gist.github.com/barryvdh/6155151

gitHub上对此进行了修复，pull请求被拒绝，但效果很好：https://github.com/twbs/bootstrap/pull/3052/files

相关内容

最新更新

热门标签：