Displaying chosen carousel slide in another div

Viewed 92

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

0 Answers
Related