Javascript image slider. Open to feedback

Code Feedback
1 
t<!DOCTYPE html>
<html>
<head>
  <title>Basic Web Page</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" >
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <div class="car-border">
    <img id="design" src="https://images.pexels.com/photos/1545743/pexels-photo-1545743.jpeg?cs=srgb&dl=pexels-yurii-hlei-1545743.jpg&fm=jpg">
  </div>
  <div class="buttons">
    <button id="a"><</button>
    <button id="b">></button>
  </div>
  <script src="script.js"></script>
</body>
</html>

const carsArray = ["https://images.pexels.com/photos/1545743/pexels-photo-1545743.jpeg?cs=srgb&dl=pexels-yurii-hlei-1545743.jpg&fm=jpg","https://images.pexels.com/photos/909907/pexels-photo-909907.jpeg?cs=srgb&dl=pexels-alex-amorales-909907.jpg&fm=jpg", "https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?cs=srgb&dl=pexels-mike-b-170811.jpg&fm=jpg", "https://images.pexels.com/photos/166054/pexels-photo-166054.jpeg?cs=srgb&dl=pexels-sebastian-voortman-166054.jpg&fm=jpg", "https://images.pexels.com/photos/358208/pexels-photo-358208.jpeg?cs=srgb&dl=pexels-pixabay-358208.jpg&fm=jpg", "https://images.pexels.com/photos/1079948/pexels-photo-1079948.jpeg?cs=srgb&dl=pexels-paulius-sapnovas-1079948.jpg&fm=jpg"];

const button1 = document.getElementById('a');
const button2 = document.getElementById('b');

let value = 0;


button2.addEventListener("click", e => {
  console.log(value++);
  document.getElementById('design').src = carsArray[value];
  if(value > 5) {
    value = -1;
    value++; 
    document.getElementById('design').src = carsArray[value];
  }
})

button1.addEventListener("click", e => {
  console.log(value--);
  document.getElementById('design').src = carsArray[value];
  if(value < 0) {
    value = 6;
    value--;
    document.getElementById('design').src = carsArray[value];
  }
})

body {
  background: aliceblue;
  color: #fff;
  padding: 25px;
  font-family: sans-serif;
}



#design {
  padding-right: 100px;
  height: 330px;
  width: 400px;
  border: 5px solid mediumpurple;
  border-radius: 5px;
  margin-left: 220px;
  margin-top: 190px;
  margin-right: 160px;
  padding-right: 0.1px;
}

.buttons button {
  border-radius: 10px;
  border-color: mediumpurple;
  color: white;
  background-color: mediumpurple;
}
.buttons #a:hover {
  background-color: orange;
}
.buttons #b:hover {
  background-color: orange;
}

#a {
  margin-left: 200px;
  margin-bottom: 25px;
}

#b {
  margin-left: 400px;
  margin-bottom: 25px;
}
2

To make it easier why not just paste the link to your code on code-pen,GitHub, or even the link to the live site

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.