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;
}
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