I've been pondering over something lately, and despite searching on Google, I couldn't find a solution specific to my situation. It seems like no one has asked this exact question before.
My current dilemma is as follows: I have a section with four vertical divs (although only two are shown in the code) that I want each to trigger a different Lightbox/Carousel when clicked. Below is the code I currently have, without the CSS which only includes styling for Slides and Modal/Carousel layout.
The Issue
What I'm struggling with is how to trigger different carousels while using the same styled Modal/Carousel layout in CSS. For instance, I would like the second Slide to open a Lightbox/Carousel containing images 3.jpg and 4.jpg.
Cheers, and have a great day. Thank you in advance.
I am still a beginner, so there may be some unnecessary pieces of code that are not being used.
HTML
<section class="row" id="gallery" data-toggle="modal" data-target="#exampleModal">
<div class="slide" alt="First slide" data-toggle="modal" data-target="#exampleModal" data-slide-to="0" >
<div class="content">
<h2> Pre-Wedding</h2>
<p>Bla-bla-bla-bla</p>
</div>
</div>
<div class="slide" alt="Second slide" data-toggle="modal" data-target="#exampleModal" data-slide-to="0">
<div class="content">
<h2> Groom</h2>
<p>Bla-bla-bla-bla</p>
</div>
</div>
</section>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="carouselExample" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block " src="1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block " src="2.jpg" alt="Second slide">
</div>
...other Images
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
Javascript
document.getElementById('gallery').classList.add("custom");
document.getElementById('exampleModal').classList.add("custom");