I'm making portfolio for myself and i have chosen to display projects in a carousel. I want it to display bigger picture, title and description of the chosen(clicked) project in another div that is below the carousel. I have made a projects array which contains:
let projects = [
{
title: "ToDoApp",
image: ('./images/projects/ToDoApp.jpg'),
thumbnail: ('./images/projects/ToDoApp_tn.jpg'),
github: "https://github.com/HereWasMynamelol/To-do-app",
description: "My to-do application using HTML, CSS and JS. I have made this application so you can dynamically add " +
"and delete your daily to-do's. All tasks are stored in a local storage and removed from it when finished. " +
"I have not add a remove function to the check button to prevent accidental deletion of a task. "
},
{
title: "agsdp",
image: ('./images/project.jpg'),
thumbnail: ('./images/project.jpg'),
github: "https://github.com/HereWasMynamelol/To-do-app",
description: "eh"
},
]
And thanks to :
projects.forEach(project => {
track.innerHTML += `
<li class="carousel__slide">
<img src=${project.thumbnail} alt="" class="carousel__images">
</li>`
})
It's adding thumbnails to the carousel as i wanted. Now i want to click on it and display it's title, image and description in div :
<div class="carousel__display">
<h1 class="carousel__display--title"></h1>
<div class="carousel__display--content">
<div class="carousel__display--image"></div>
<div class="carousel__display--description">
<p class="carousel__display--description-paragraph"></p>
</div>
</div>
</div>
How should i go about it ? I already have click event listener attached to every slide for moving around the carousel and tried to add to it:
projects.forEach((project) => {
display__img.innerHTML = `${project.image}`
display__desc.innerHTML = `${project.description}`;
})
But i think it will try to add descriptions for every project with just a single click and i will end up with a mess or just the description of the last item in the projects array.
Sorry for such a long question but i have no idea how to explain it better. Tried googling it, no luck