jQuery IE 和 Microsoft Edge 中的轮播页面移动

Question

我有一个利用 jQuery 轮播幻灯片功能的网页。当加载新的问题幻灯片时，页面会快速移动（左右）几秒钟，然后稳定下来。所有内容都是动态生成的。我在 IE 11 和最新版本的 Microsoft Edge 上看到了这一点。它在 Chrome 和 Firefox 上非常轻微。我摆弄过将高度和宽度设置为 100% 并调整溢出。但是问题仍然存在。

这是我网站的模拟版本的 link，因为视觉效果将有助于最好地传达我所看到的问题 - https://pub.s7.exacttarget.com/c1i011a1jlr。此问题出现在幻灯片 2 和 3 上。

谢谢，

艾莉森

Answer 1

$('#PGECarousel').on('slide.bs.carousel', function(e) {
  if (e.from < 2) {
    $('.carousel-item').addClass('noAnim');
  }
}).on('slid.bs.carousel', function(e) {
  $('.carousel-item').removeClass('noAnim');
})

很可能会解决您的问题。 CSS:

你也需要这个

.carousel-item.noAnim {
  transition-duration: 0s;
}

另一方面，我还会将这些添加到您的样式中：

h2:focus {
  border: none;
  padding: 0;
}
.slide-container {
  min-height: 383px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.carousel-item {
   transition-timing-function: cubic-bezier(.5,0,.2,1);
}
@media (max-width: 767px) {
  .slide-container {
      min-height: 0;
  }
}

坦率地说，您不应该使用 Bootstrap 轮播。任何流行的产品都需要少得多，提供的多得多（Slick、Flexslider、Owl）。

至于额外的CSS，我觉得h2:focus上的padding:0是必须的，其他的都差不多。

注意：我没有在 IE 或 Edge 上测试过它（我在这个系统上没有它们），但是上面禁用了导致抖动的幻灯片的 CSS 过渡。

jQuery IE 和 Microsoft Edge 中的轮播页面移动

jQuery Carousel Page Shifting in IE and Microsoft Edge

css

jquery

twitter-bootstrap-3

bootstrap-carousel