Bootstrap carousel with lightBox gallery
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. Bootstrap can be used for creating beautiful image galleries with thumbnails. Here is the demo of adding lightbox gallery support for the Bootstrap.
Demo
HTML
<div id="bootstrap-gallery-carousel" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="..." />
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#bootstrap-gallery-carousel"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#bootstrap-gallery-carousel"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
JavaScript
// Get the carousel element by its ID
let carouselEl = document.getElementById('bootstrap-gallery-carousel');
// Create a new Bootstrap 5 Carousel instance with specified options
const carousel = new bootstrap.Carousel(carouselEl, {
interval: 2000,
wrap: false,
});
// Add an event listener for the 'slide.bs.carousel' event, fires immediately when the slide instance method is invoked.
carouselEl.addEventListener('slide.bs.carousel', (event) => {
const container = document.querySelector('.carousel-inner');
window.lightGallery(container, {
plugins: [lgThumbnail],
selector: '.lg-item',
});
});
CSS (Optional)
.carousel-item {
.lg-item > img {
height: 600px;
}
}