let data = [
{
id:1,
name: 'leopard',
description:'animal from my childhood. I love this animal',
src:'animal1.jpg'
},
{
id:2,
name: 'cat',
description:'animal from my childhood. I love this animal',
src:'animal4.jpg'
},
{
id:3,
name: 'kitty',
description:'animal from my childhood. I love this animal',
src:'animal3.jpg'
},
{
id:4,
name: 'giraph',
description:'animal from my childhood. I love this animal',
src:'animal2.jpg'
},
]
let indexOfList = 0
let func = e=>{
indexOfList++
title.textContent = data[indexOfList].name
animal.src = data[indexOfList].src
descript.textContent = data[indexOfList].description
if(indexOfList == data.length-1){
indexOfList = 0
}
}
next.onclick = e=>{
indexOfList++
title.textContent = data[indexOfList].name
animal.src = data[indexOfList].src
descript.textContent = data[indexOfList].description
if(indexOfList == data.length-1){
indexOfList = 0
}
}
prev.onclick= e =>{
indexOfList --
title.textContent = data[indexOfList].name
animal.src = data[indexOfList].src
descript.textContent = data[indexOfList].description
if(indexOfList == data.length - 1) {
indexOfList = 0
debugger
}
}
помогите пожалуйста
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#animal{
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<ul id="carusel">
<li>
<h1 id="title">Animal Collection</h1>
<img src="./animal2.jpg" alt="animal" id="animal">
<p id="descript">animal from my childhood. I love this animal</p>
</li>
</ul>
<button id="prev">Prev</button>
<button id="next">Next</button>
<script src="./main.js"></script>
</body>
</html>