I am currently working on a slider project using HTML, javascript, and CSS. I'm facing an issue where only the first two images (li) are being displayed and it's not transitioning to the other (li) elements. Below is the HTML code snippet:
<section id="cliens" class="cliens section-bg">
<div class="container">
<ul id="slider">
<li>
<div class="row" data-aos="zoom-in">
<div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
<img src="assets/img/clients/client-1.png" class="img-fluid" alt="">
</div>
<div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
<img src="assets/img/clients/client-2.png" class="img-fluid" alt="">
</div>
</div>
</li>
<li>
<div class="row" data-aos="zoom-in">
<div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
<img src="assets/img/clients/client-1.png" class="img-fluid" alt="">
</div>
<div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
<img src="assets/img/clients/client-2.png" class="img-fluid" alt="">
</div>
</div>
</li>
<li>
<div class="row" data-aos="zoom-in">
<div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
<img src="assets/img/clients/client-1.png" class="img-fluid" alt="">
</div>
<div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
<img src="assets/img/clients/client-2.png" class="img-fluid" alt="">
</div>
</div>
</li>
</ul>
</div>
</section>
Here is the JavaScript code portion:
<script>
// Slide every slideDelay seconds
const slideDelay = 5000;
const dynamicSlider = document.getElementById("slider").value;
var curSlide = 0;
window.setInterval(()=>{
curSlide++;
if (curSlide === dynamicSlider.childElementCount) {
curSlide = 0;
}
// Actual slide
dynamicSlider.firstElementChild.style.setProperty("margin-left", "-" + curSlide + "00%");
}, slideDelay);
</script>
And lastly, here is the corresponding CSS code:
<style>
#slider {
width: 100%;
height: 100%;
margin: 0 auto;
border: 10px solid transparent;
padding: 0px;
z-index: 100;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
#slider > li {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); /* Slide css animation */
background-size: cover;
vertical-align: top;
box-sizing: border-box;
white-space: normal;
}
</style>