我在https://competent-lamport-72eab6.netlify.com/处有一个bootstrap 4传送带滑块。

滑块有3个幻灯片。但是,为了优化页面速度,我提供了5张不同大小的图像,这些图像会在特定的屏幕宽度下加载。我已经使用<picture><srcset>完成了此操作。

请参阅下面的代码:

<div class="carousel-item">
 <picture>
    <source class="lazy" srcset="img/carousel/great-wall44-375.jpg" media="(max-width: 375px)" >
    <source class="lazy" srcset="img/carousel/great-wall44-768.jpg" media="(max-width: 768px)" >
    <source class="lazy" srcset="img/carousel/great-wall44-1200x514.jpg" media="(max-width: 1200px)" >
    <source class="lazy" srcset="img/carousel/great-wall44-1400x514.jpg" media="(max-width: 1400px)" >
    <source class="lazy" srcset="img/carousel/great-wall44-1920x902-low.jpg" media="(max-width: 1920px)" >
    <img class="lazy" src="img/carousel/great-wall44.jpg" data-src="img/carousel/great-wall44-new5.jpg" >
 </picture>
</div>


如您所见,我在各自的断点处加载了各种图像:375px,768px,1200px,1400px和1920px。但是,这非常出色。

问题

调整页面大小(或在小型设备上看到)时,前两张幻灯片的过渡效果很好,但是最后一张幻灯片似乎先滑动到幻灯片中图像的整个宽度,然后再次滑回第一张幻灯片。

这是带有图片的示例,可帮助您阐明问题:


让我们去https://competent-lamport-72eab6.netlify.com/
我们已经将浏览器的大小调整为400px。您将看到滑块加载了375px至767px屏幕宽度之间的768px图像。见下图:

css - 调整屏幕大小时,在引导动画时,Bootstrap 4轮播的最后一个图像宽度保持大于滑动条宽度(不裁剪为滑动条宽度)-LMLPHP
前两张幻灯片很好地滑动。大!
这是屏幕宽度为400px的第三张幻灯片:

css - 调整屏幕大小时,在引导动画时,Bootstrap 4轮播的最后一个图像宽度保持大于滑动条宽度(不裁剪为滑动条宽度)-LMLPHP
这是400px幻灯片div中完整的768px尺寸的图像。

css - 调整屏幕大小时,在引导动画时,Bootstrap 4轮播的最后一个图像宽度保持大于滑动条宽度(不裁剪为滑动条宽度)-LMLPHP
因此,在此处滑动时,它不会将裁剪后的图像滑动到400px,而是先一直滑动到768px的完整图像,并在过渡中看起来像这样:

css - 调整屏幕大小时,在引导动画时,Bootstrap 4轮播的最后一个图像宽度保持大于滑动条宽度(不裁剪为滑动条宽度)-LMLPHP


然后回到第一张幻灯片。

这就是问题所在。它发生在过程中的每个断点处。

这看起来令人难以置信。我想要解决此问题。最终的幻灯片应该像前两张幻灯片一样进行动画处理。请查看滑块并重新创建我的步骤,以查看实际问题。

我将不胜感激,

提前致谢。

最佳答案

我发现轮播图像的解决方案没有裁剪到滑块宽度。我通过在overflow: hidden;中添加.carousel-item解决了这一问题。

因此,html保持不变。但是CSS已添加。

.carousel-item {
      overflow: hidden;
}


好东西!我希望这可以帮助任何看着自举轮播滑块图像溢出问题的人。

10-07 19:12
查看更多