Having trouble incorporating an image slider into my website. The images are 1650 by 350 in size and there are a total of 4 images with these dimensions. I attempted to implement this using HTML and CSS, but the images are not sliding automatically as intended. I tried to set up automatic movement in the CSS file, but it doesn't seem to be working. Any ideas on what could be causing this issue?
CSS:
.slider {
width: 1600px;
height: 350px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-container {
width: 2000px;
background-color: pink;
height: 350px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slide {
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slide-1:target~.image-container {
left: 0px;
}
#slide-2:target~.image-container {
left: -1600px;
}
#slide-3:target~.image-container {
left: -3200px;
}
#slide-4:target~.image-container {
left: -4800px;
}
.buttons {
position: relative;
top: -20px;
}
.buttons a {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50px;
background-color: lightgreen;
}
HTML:
<div class="slider">
<span id="slide-1"></span>
<span id="slide-2"></span>
<span id="slide-3"></span>
<span id="slide-4"></span>
<div class="image-container">
<img src="./assets/slider-1.jpg" class="slide" width="1650" height="350" />
<img src="./assets/slider-2.jpg" class="slide" width="1650" height="350" />
<img src="./assets/slider-3.jpg" class="slide" width="1650" height="350" />
<img src="./assets/slider-4.jpg" class="slide" width="1650" height="350" />
</div>
<div class="buttons">
<a href="#slide-1"></a>
<a href="#slide-2"></a>
<a href="#slide-3"></a>
<a href="#slide-4"></a>
</div>
</div>