如何去掉滑块上图片之间的空格？

Question

你好，我正试图用HTMLCSS创建一个简洁的图像滑块。我已经成功地创建了一个，但是每个幻灯片之间有非常大的空间，并尝试了一些事情来消除它们。

图片之间的空间截图

HTML代码

<div class="slider">
  <div class="slide" id="slide-1"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" height="100%" alt="♥"></div>
  <div class="slide" id="slide-2"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" width="100%" alt="♥"></div>
  <div class="slide" id="slide-3"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" height="100%" alt="♥"></div>
  <div class="slide" id="slide-4"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" width="100%" alt="♥"></div>
  <div class="slide" id="slide-5"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" height="100%" alt="♥"></div>
</div><div class="slider">
  <div class="slide" id="slide-1"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" height="100%" alt="♥"></div>
  <div class="slide" id="slide-2"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" width="100%" alt="♥"></div>
  <div class="slide" id="slide-3"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" height="100%" alt="♥"></div>
  <div class="slide" id="slide-4"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" width="100%" alt="♥"></div>
  <div class="slide" id="slide-5"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" height="100%" alt="♥"></div>
</div>

CSS代码

.slide {
  width: 100%;
  flex-shrink: 0;
  height: 100%;
  padding: 0px ;
  margin: 0px ;
}

.slider {
  width: 1400px;
  height: 650px;
  display: flex;
  overflow-x: auto;
  margin: 0px ;
  padding: 0px ;
}

• 我试着将slidesliderimage类（rio-womens）的marginpadding设置为0。
• 我在这里发现了一个类似的问题，说是要加入这个CSS代码。

  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slider {
  height: 400px;
  overflow: hidden;
}
.slider img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

但很遗憾，这并没有用，因为它让我的图片消失了。所以我去掉了 "display: none"。这让我的图片又回来了，但是我还是遇到了之前的问题（图片之间有空格）。

我试过使用一些不同的旋转木马代码，包括bootstrapjss slider。然而，由于我的图片是不同大小的横向和纵向的，我发现他们是不太正确的。这一直是最接近我正在寻找什么，到目前为止 - 干净，简单，从左到右滑动。

如果能得到任何帮助，我将感激不尽，因为我已经尝试了好几天。

先谢谢你

Answer 1

你需要删除 width: 100% 从 .slide

.slide {
  flex-shrink: 0;
  height: 100%;
  padding: 0px ;
  margin: 0px ;
}

.slider {
  width: 1400px;
  height: 650px;
  display: flex;
  overflow-x: auto;
  margin: 0px ;
  padding: 0px ;
}

<div class="slider">
  <div class="slide" id="slide-1"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" height="100%" alt="♥"></div>
  <div class="slide" id="slide-2"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" width="100%" alt="♥"></div>
  <div class="slide" id="slide-3"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" height="100%" alt="♥"></div>
  <div class="slide" id="slide-4"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" width="100%" alt="♥"></div>
  <div class="slide" id="slide-5"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" height="100%" alt="♥"></div>
</div><div class="slider">
  <div class="slide" id="slide-1"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" height="100%" alt="♥"></div>
  <div class="slide" id="slide-2"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" width="100%" alt="♥"></div>
  <div class="slide" id="slide-3"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" height="100%" alt="♥"></div>
  <div class="slide" id="slide-4"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" width="100%" alt="♥"></div>
  <div class="slide" id="slide-5"><img class="rio-womens" src="https://i.imgur.com/8E2Z8s5.jpg" height="100%" alt="♥"></div>
</div>

Answer 2

也许在你的类 "幻灯片 "里面用:

justify-content : "space-between" or "space-around" or "space-evenly" ?

https:/css-tricks.comsnippetscssa-guid-to-flexbox。

Answer 3

只要把HTML代码中的width="100%"和height="100%"去掉即可。