Shoxrux,
<!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;
}
li{
list-style: none;
}
</style>
</head>
<body>
<ul id="carusel">
<li>
<h1 id="title">leopard</h1>
<img src="https://fakeimg.pl/350x200/?text=leopard" 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>let data = [
{
id:1,
name: 'leopard',
description:'animal from my childhood. I love this animal',
src:'https://fakeimg.pl/350x200/?text=leopard'
},
{
id:2,
name: 'cat',
description:'animal from my childhood. I love this animal',
src:'https://fakeimg.pl/350x200/?text=cat'
},
{
id:3,
name: 'kitty',
description:'animal from my childhood. I love this animal',
src:'https://fakeimg.pl/350x200/?text=kitty'
},
{
id:4,
name: 'giraph',
description:'animal from my childhood. I love this animal',
src:'https://fakeimg.pl/350x200/?text=giraph'
},
]
let indexOfList = 0
next.onclick = e=>{
indexOfList++;
if(indexOfList >= data.length){
indexOfList = 0
}
title.textContent = data[indexOfList].name
animal.src = data[indexOfList].src
descript.textContent = data[indexOfList].description
}
prev.onclick= e =>{
indexOfList--;
if(indexOfList < 0 ) {
indexOfList = data.length - 1
};
title.textContent = data[indexOfList].name
animal.src = data[indexOfList].src
descript.textContent = data[indexOfList].description
}
</script>
</body>
</html>