我有一个利用jQuery旋转木马幻灯片功能的网页。加载新的"问题"幻灯片时,页面会快速移动(左右(几秒钟,然后稳定下来。所有内容都是动态生成的。我在IE 11和最新版本的Microsoft Edge上看到了这一点。在Chrome和Firefox上,它是如此的微不足道。我把高度和宽度设置为100%,并调整溢出。然而,这个问题仍然存在。
这里有一个链接到我的网站的模拟版本,因为视觉效果将有助于最好地传达我所看到的问题——https://pub.s7.exacttarget.com/c1i011a1jlr.此问题出现在幻灯片2和3中。
谢谢你,
Allison
$('#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上的padding:0
:焦点是必须的,其余的或多或少都是细节。
注意:我还没有在IE或Edge上测试过它(我在这个系统上没有(,但上面禁用了导致颤抖的幻灯片的CSS转换。