【发布时间】：2020-10-06 01:58:27
【问题描述】：
您好，我正在尝试使用 HTML/CSS 创建一个干净/简单的图像滑块。我已经设法创建了一个，但是每张幻灯片之间都有很大的空间，并尝试了一些方法来摆脱它们。
Screenshot of space between images
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 ;
}
- 我已尝试将幻灯片/滑块/图像类（rio-womens）的边距/填充设置为 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;
}
遗憾的是，这不起作用，因为它使我的图像消失了。所以我摆脱了“显示：无”。这使我的图像返回，但给我留下了与以前相同的问题（图像之间的空格）。
我尝试过使用一些不同的轮播代码，包括 bootstrap/jss 滑块。然而，由于我的图像尺寸/水平和肖像不同，我发现它们不太正确。这是迄今为止我所寻找的最接近的 - 干净简单，从左到右滑动。
感谢任何帮助，因为我这几天一直在尝试解决这个问题。
提前致谢！
【问题讨论】：
标签： html css slider image-gallery