I'm trying to make a slider using map but I don't know what went wrong.
The result of the image map should return a slider
<!DOCTYPE html>
<html lang="pt-br">
<head>
</head>
<body>
<div id="slide">
<div class="navigation">
<i class="fa-solid fa-arrow-left prev-btn"></i>
<i class="fa-solid fa-arrow-right next-btn"></i>
</div>
<div class="navigation-visibility">
<div class="slide-icon active"></div>
<div class="slide-icon"></div>
<div class="slide-icon"></div>
<div class="slide-icon"></div>
</div>
</div>
</div>
<script>
const initialSlides = [
{
description: <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. labore et dolore magna aliqua.</p>,
Image: "../images/image1",
button: <button class="slide">Veja</button>
},
{
description: <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. labore et dolore magna aliqua.</p>,
Image: '../images/image2',
button: <button class="slide">Veja</button>
},
{
description: <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. labore et dolore magna aliqua.</p>,
Image: '../images/image3',
button: <button class="slide">Veja</button>
},
{
description: <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. labore et dolore magna aliqua.</p>,
Image: '../images/image4',
button: <button class="slide">Veja</button>
},
];
var resultadomap = initialSlides.map(function(slide, index){
return '<div>
<img>${slide.Image}</img>
<p>${slide.description}</p>
<p>${slide.button}</p>
</div>';
});
document.querySelector("#slide div").innerHTML = resultadomap.join("");
</script>
</div>
</body>
</html>
I'm trying to make a slider using map but I don't know what went wrong.
The result of the image map should return a slider
