Здравствуйте, я пытаюсь создать чистый / простой слайдер изображений с помощью только HTML / CSS. Мне удалось создать один, но с очень большими промежутками между слайдами, и я попытался избавиться от них несколькими способами.
Скриншот пространства между изображениями
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 ;
}
- Я попытался установить для полей / отступов значение 0 для класса слайдов / слайдеров / изображений (rio- womens)
- Я нашел здесь аналогичный вопрос, в котором говорилось, что нужно добавить в этот 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». Из-за чего мои изображения вернулись, но у меня возникла та же проблема, что и раньше (пробелы между изображениями).
Я пробовал использовать несколько разных кодов карусели, включая слайдер bootstrap / jss. Однако, поскольку мои изображения различаются по размеру / горизонтали и портрету, я обнаружил, что они не совсем правильные. Это было ближе всего к тому, что я искал до сих пор - чистый и простой, скользящий слева направо.
Был бы признателен за любую помощь в этом, так как я пытался понять это уже несколько дней .
Заранее спасибо!