I want to create a javascript product slider that moves 150px every 5s and returns to the first slide when the slider is finished. like this picture: https://magerta.ir/wp-content/uploads/2021/09/WordPress-WooCommerce-Product-Slider-Plugins-Cover.jpg
<div class="container-fluid">
<div class="slider-container best-Books">
<div id="right-arrow" class="arrow">
<i class="fas fa-angle-right"></i>
</div>
<section class="slider">
<div class="thumbnail">
<div class="icons">
<a href="">
<i class="fa-regular fa-heart"></i>
</a>
<a href="">
<i class="fa-regular fa-eye"></i>
</a>
<a href="">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</div>
<img src="images/1.jpg" alt="">
<div class="details">
<h5>آسمان خراش</h5>
<p><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i></p>
<h6>نویسنده</h6>
<p>150 تومان<span>200 تومان</span></p>
</div>
</div>
<div class="thumbnail">
<div class="icons ">
<a href="">
<i class="fa-regular fa-heart"></i>
</a>
<a href="">
<i class="fa-regular fa-eye"></i>
</a>
<a href="">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</div>
<img src="images/2.jpg" alt="">
<div class="details">
<h5>آسمان خراش</h5>
<p><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i></p>
<h6>نویسنده</h6>
<p>150 تومان<span>200 تومان</span></p>
</div>
</div>
<div class="thumbnail">
<div class="icons">
<a href="">
<i class="fa-regular fa-heart"></i>
</a>
<a href="">
<i class="fa-regular fa-eye"></i>
</a>
<a href="">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</div>
<img src="images/3.jpg" alt="">
<div class="details">
<h5>آسمان خراش</h5>
<p><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i></p>
<h6>نویسنده</h6>
<p>150 تومان<span>200 تومان</span></p>
</div>
</div>
<div class="thumbnail">
<div class="icons">
<a href="">
<i class="fa-regular fa-heart"></i>
</a>
<a href="">
<i class="fa-regular fa-eye"></i>
</a>
<a href="">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</div>
<img src="images/4.jpg" alt="">
<div class="details">
<h5>آسمان خراش</h5>
<p><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i></p>
<h6>نویسنده</h6>
<p>150 تومان<span>200 تومان</span></p>
</div>
</div>
<div class="thumbnail">
<div class="icons">
<a href="">
<i class="fa-regular fa-heart"></i>
</a>
<a href="">
<i class="fa-regular fa-eye"></i>
</a>
<a href="">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</div>
<img src="images/5.jpg" alt="">
<div class="details">
<h5>آسمان خراش</h5>
<p><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i></p>
<h6>نویسنده</h6>
<p>150 تومان<span>200 تومان</span></p>
</div>
</div>
<div class="thumbnail">
<div class="icons">
<a href="">
<i class="fa-regular fa-heart"></i>
</a>
<a href="">
<i class="fa-regular fa-eye"></i>
</a>
<a href="">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</div>
<img src="images/6.jpg" alt="">
<div class="details">
<h5>آسمان خراش</h5>
<p><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i></p>
<h6>نویسنده</h6>
<p>150 تومان<span>200 تومان</span></p>
</div>
</div>
<div class="thumbnail">
<div class="icons">
<a href="">
<i class="fa-regular fa-heart"></i>
</a>
<a href="">
<i class="fa-regular fa-eye"></i>
</a>
<a href="">
<i class="fa-solid fa-cart-shopping"></i>
</a>
</div>
<img src="images/7.jpg" alt="">
<div class="details">
<h5>آسمان خراش</h5>
<p><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i></p>
<h6>نویسنده</h6>
<p>150 تومان<span>200 تومان</span></p>
</div>
</div>
</section>
<div id="left-arrow" class="arrow">
<i class="fas fa-angle-left "></i>
</div>
</div>
</div>let thumbnail = document.querySelectorAll(".best-Books .slider .thumbnail");
let slider = document.querySelector(".slider");
let prev = document.querySelector("#left-arrow");
let next = document.querySelector("#right-arrow");
let maxSlide = slider.scrollWidth;
const maxScrollLeft = slider.scrollWidth - slider.clientWidth;
console.log(maxScrollLeft , slider.scrollLeft);
function autoPlay() {
if(slider.scrollLeft > (maxScrollLeft - 1)){
slider.scrollLeft -= maxScrollLeft;
}
else{
slider.scrollLeft += 70;
}
}
prev.addEventListener("click", () => {
slider.scrollLeft -= 100;
});
next.addEventListener("click", () => {
slider.scrollLeft += 300;
});
let play = setInterval(autoPlay, 50);
for (let i = 0; i < thumbnail.length; i++) {
thumbnail[i].addEventListener("mouseover", () => {
clearInterval(play);
});
thumbnail[i].addEventListener("mouseout", () => {
return (play = setInterval(autoPlay, 50));
});
}I made this myself, but where I had a problem was the slider repetition part.
