Question

我有一个利用jQuery Carousel Slide功能的网页。装入新的“问题”幻灯片后，页面会（向左和向右）移动几秒钟，然后稳定下来。所有内容都是动态生成的。我在IE 11和Microsoft Edge的最新版本上看到了这一点。在Chrome和Firefox上它是如此之细。我摆弄了将高度和宽度设置为100％并调整溢出。但是问题仍然存在。

这里是指向我的网站的模拟版本的链接，因为视觉效果将最好地传达我所看到的问题-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过渡。

IE和Microsoft Edge中的jQuery Carousel页面移位

1 个答案: