I am trying to make a Testimonials slider in Javascript but I can´t get the slider to move to the next slide. It works fine if you are in the first or last slide otherwise it wont move. Tried many different solutions but none of them worked. I am a beginner so maybe the answer is right in front of my eyes but I cant seem to find it. Thanks for your help!
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 + "%)";
};
};*{
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body{
background-image: url("grass.jpg");
background-repeat: no-repeat;
background-size: 100vw;
overflow: hidden;
}
h1{
text-align: center;
margin: 15vh auto;
font-weight: normal;
}
.arrowleft,
.arrowright{
width: 3vw;
cursor: pointer;
}
.arrowleft:hover{
content: url("arrowleftwhite.png");
width: 3vw;
}
.arrowright:hover{
content: url("arrowrightwhite.png");
width: 3vw;
}
.arrowleft{
position: absolute;
top: 57vh;
left: 14vw;
}
.arrowright{
position: absolute;
top: 57vh;
left: 83vw;
}
#maincontainer{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 10vw;
}
.container{
border: 2px solid white;
width: 70vw;
margin-left: 14.5vw;
background: rgba(255, 255, 255, 0.5);
}
.clientpic{
width: 10vw;
border-radius: 50%;
border: none;
display: block;
margin: -7vh auto;
}
h3{
text-align: center;
margin-top: 8vh;
}
.starscontainer{
display: flex;
flex-direction: row;
justify-content: center;
}
.stars{
width: 2vw;
}
p{
text-align: center;
font-weight: bold;
margin: 8vh auto;
}<!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">
<img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
<div class="container" id="container1">
<img src="face1.jpg" alt="Clients pic" class="clientpic">
<h3>John</h3>
<div class="starscontainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
</div>
<p>"I had a great experience building my garden. Would definitely recommend them."</p>
</div>
<img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">
<img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
<div class="container" id="container2">
<img src="face2.jpg" alt="Clients pic" class="clientpic">
<h3>Michael</h3>
<div class="starscontainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
</div>
<p>"Great service, very professional people. Good value for money, would call them again."</p>
</div>
<img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">
<img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
<div class="container" id="container3">
<img src="face3.jpg" alt="Clients pic" class="clientpic">
<h3>Anna</h3>
<div class="starscontainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
</div>
<p>"They did a great work renewing my garden. Really happy with them."</p>
</div>
<img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">
<img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
<div class="container" id="container4">
<img src="face4.jpg" alt="Clients pic" class="clientpic">
<h3>Mary</h3>
<div class="starscontainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
</div>
<p>"Good workers, they finished works neatly and right on time. Highly recommendable"</p>
</div>
<img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">
</div>
<script type="text/javascript" src="testimonials.js"></script>
</body>
</html>You have to change your if statements and use the value -135 in both cases in your move formula. Also when moving to the previous slide you should decrease the counter counter -= 1;.
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 (counter === 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 (counter === 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 + "%)";
};
};*{
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body{
background-image: url("grass.jpg");
background-repeat: no-repeat;
background-size: 100vw;
overflow: hidden;
}
h1{
text-align: center;
margin: 15vh auto;
font-weight: normal;
}
.arrowleft,
.arrowright{
width: 3vw;
cursor: pointer;
}
.arrowleft:hover{
content: url("arrowleftwhite.png");
width: 3vw;
}
.arrowright:hover{
content: url("arrowrightwhite.png");
width: 3vw;
}
.arrowleft{
position: absolute;
top: 57vh;
left: 14vw;
}
.arrowright{
position: absolute;
top: 57vh;
left: 83vw;
}
#maincontainer{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 10vw;
}
.container{
border: 2px solid white;
width: 70vw;
margin-left: 14.5vw;
background: rgba(255, 255, 255, 0.5);
}
.clientpic{
width: 10vw;
border-radius: 50%;
border: none;
display: block;
margin: -7vh auto;
}
h3{
text-align: center;
margin-top: 8vh;
}
.starscontainer{
display: flex;
flex-direction: row;
justify-content: center;
}
.stars{
width: 2vw;
}
p{
text-align: center;
font-weight: bold;
margin: 8vh auto;
}<!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">
<img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
<div class="container" id="container1">
<img src="face1.jpg" alt="Clients pic" class="clientpic">
<h3>John</h3>
<div class="starscontainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
</div>
<p>"I had a great experience building my garden. Would definitely recommend them."</p>
</div>
<img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">
<img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
<div class="container" id="container2">
<img src="face2.jpg" alt="Clients pic" class="clientpic">
<h3>Michael</h3>
<div class="starscontainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
</div>
<p>"Great service, very professional people. Good value for money, would call them again."</p>
</div>
<img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">
<img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
<div class="container" id="container3">
<img src="face3.jpg" alt="Clients pic" class="clientpic">
<h3>Anna</h3>
<div class="starscontainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
</div>
<p>"They did a great work renewing my garden. Really happy with them."</p>
</div>
<img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">
<img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
<div class="container" id="container4">
<img src="face4.jpg" alt="Clients pic" class="clientpic">
<h3>Mary</h3>
<div class="starscontainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
</div>
<p>"Good workers, they finished works neatly and right on time. Highly recommendable"</p>
</div>
<img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">
</div>
<script type="text/javascript" src="testimonials.js"></script>
</body>
</html>