I'm currently attempting to create a Testimonials slider using JavaScript, but I'm facing an issue with the slider not transitioning to the next slide. It functions correctly when on the first or last slide, but fails to move otherwise. I've explored multiple solutions but none have proven successful. As a novice, I suspect the solution may be evident, yet I can't seem to identify it. Thank you for any assistance!
var counter = 0;
var testimonials = document.getElementsByClassName("container");
testimonials = Array.from(testimonials);
var arrowleft = document.getElementsByClassName("arrowleft");
var arrowright = document.getElementsByClassName("arrowright");
var move = 0;
for (let i = 0; i < arrowleft.length; i++) {
arrowright[i].addEventListener("click", getNextTestimonial);
arrowleft[i].addEventListener("click", getPreviousTestimonial);
};
function getPreviousTestimonial(){
if (testimonials[0]){
counter = 3;
} else {
counter += 1;
};
for (var key in testimonials){
move = -135 * counter;
testimonials[key].style.transition = "transform 1.5s ease";
testimonials[key].style.transform = "translate(" + move + "%)";
};
}
function getNextTestimonial(){
if (testimonials[3]){
counter = 0;
} else {
counter += 1;
};
for (var key in testimonials){
move = 135 * counter;
testimonials[key].style.transition = "transform 1.5s ease";
testimonials[key].style.transform = "translate(" + move + "%)";
};
}
.............CSS CODE.............
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testimonials</title>
<link rel="stylesheet" href="testimonials.css">
</head>
<body>
<h1>CLIENT TESTIMONIALS</h1>
<div id="maincontainer">
.............HTML CODE.............
</div>
</body>
</html>