Jquery 如何在旋转木马滑块中增加图像之间的间隙或在滑动时消除故障

我做了一个旋转木马参考这一点，最初张贴在这，但不幸的是，我不想在第一张图片填充。所以我删除了第一张图片的填充，但这会产生较大的图片宽度

所以，我删除了所有图像中的填充，并为间隙添加了左边距

.carousel-item img {
    padding: 0;
    margin-right: 1rem; /* for gap */
}

但当我滑动它时，它产生了一些小故障

是否有一个解决方案来增加图像之间的间隙（不是在第一个和最后一个图像中）

代码笔链接：

$（“#travelCarousel”）.carousel({
间隔：假
});
$（“#travelCarousel.carousel.carousel项目”）。每个（函数（）{
设next=$（this.next（）；
如果（！next.length）{
next=$（this.sibbines（':first'）；
}
next.children（':first child'）.clone（）.appendTo（$（this））；
对于（设i=0；i此小故障是由于间隙是透明的，您可以看到下一个/上一个滑动项穿过它们。一个想法是使这些间隙不透明

例如，您可以向图像添加白色的
框阴影
，以覆盖透明间隙：

.carousel-item img {
    padding: 0;
    margin-right: 1rem;
    /*added this*/
    box-shadow: 
       1rem 0 #fff,
      -1rem 0 0 #fff; 
}


$（“#travelCarousel”）.carousel({
间隔：假
});
$（“#travelCarousel.carousel.carousel项目”）。每个（函数（）{
设next=$（this.next（）；
如果（！next.length）{
next=$（this.sibbines（':first'）；
}
next.children（':first child'）.clone（）.appendTo（$（this））；
对于（设i=0；i我认为这种方法的最大问题是转换的硬编码“33.333%”没有考虑间隙/裕度。如果使用
calc（x%+间隙）
作为转换的值，它工作得很好

此外，为了适应所有改变可见幻灯片数量的引导断点，您需要添加不同的转换偏移（例如，小屏幕为20%偏移，大屏幕为50%偏移）。下面是这种方法的一个粗略示例。
我改进了您的代码片段，在html中添加了CSS。问题是样式的顺序，这就是为什么您在单击幻灯片时没有相同的预览效果。右侧图像出现故障，第一张图像的间隙在大约300毫秒后填满。@NishargShah我想是du to tra注意，试着设置
转换计时功能：轻松；
到carousel itembro我看到了你和你解决的大多数css难题，非常棒。谢谢兄弟，但是当你点击幻灯片时会出现小故障，第一个图像间隔会在大约300毫秒后填满。你在使用什么浏览器？对我来说（Firefox）问题已经解决。此外，视口的宽度为您提供了问题（因为可能存在我的示例未涵盖的具有特定引导断点的边缘情况）是的，兄弟，firefox有完整的视图，但不在chrome中，请在chrome中打开并解决问题。我用css更新了代码笔，使其在chrome上的行为与在firefox上的行为相同-基本上图像现在保持纵横比，在小屏幕上，无论图像大小如何，旋转木马都会缩小。兄弟，还有一件事，第三件事图像被窗口剪切为什么？你们能解决它吗，bcz在我的图像中清楚地显示图像被剪切