Image Slider With Bootstrap 4 and Baguettebox.js

Image slider is created for the image gallery by using Bootstrap 4 and baguettebox.js JavaScript. This image slider looks like a Bootstrap 4 carousel slider with thumbnails. We have various options to change the image carousel behaviors from Baguette box JavaScript.

HTML

<div class="photoGallery">
    <div class="container">
        <h2 class="text-center">Bootstrap 4 Gallery</h2>
        <p class="text-center">Click on gallery image and view images as slides</p> 
        <hr>      
        <div class="gallery-columns">
            <div class="row">
                <div class="col-6 col-sm-4 mb-4">
                    <a href="images/image-one.jpg" class="thumbnail">
                        <img src="images/image-one.jpg" class="img-fluid" alt="Gallery Image">
                    </a>
                </div>
                <div class="col-6 col-sm-4 mb-4">
                    <a href="images/image-two.jpg" class="thumbnail">
                        <img src="images/image-two.jpg" class="img-fluid" alt="Gallery Image">
                    </a>
                </div>
                <div class="col-6 col-sm-4 mb-4">
                    <a href="images/image-three.jpg" class="thumbnail">
                        <img src="images/image-three.jpg" class="img-fluid" class="img-fluid" alt="Gallery Image">
                    </a>
                </div>
                <div class="col-6 col-sm-4 mb-4">
                    <a href="images/image-four.jpg" class="thumbnail">
                        <img src="images/image-four.jpg" class="img-fluid" alt="Gallery Image">
                    </a>
                </div>
                <div class="col-6 col-sm-4 mb-4">
                    <a href="images/image-five.jpg" class="thumbnail">
                        <img src="images/image-five.jpg" class="img-fluid" alt="Gallery Image">
                    </a>
                </div>
                <div class="col-6 col-sm-4 mb-4">
                    <a href="images/image-six.jpg" class="thumbnail">
                        <img src="images/image-six.jpg" class="img-fluid" alt="Gallery Image">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.photoGallery {
    padding: 30px 0px;
}
.photoGallery h2 {
    font-size: 40px;
    color: #2196F3;
}
.photoGallery p {
    font-size: 18px;
    color: #9e9e9e;
}
.gallery-columns {
    padding: 15px 0px;
    margin-top: 30px;
}
.gallery-columns .thumbnail {
    max-height: 235px;
    overflow: hidden;
    display: block;
    border-radius: 50px 0px 50px 0px;
    box-shadow: 0px 0px 6px 0px #777777;
    border: 1px solid #fff;
}
.gallery-columns a img {
    transition: 1s;
    cursor: zoom-in;
}
.gallery-columns .thumbnail:hover img {
    transform: scale(1.07);
}
#baguetteBox-overlay .full-image img {
    border: 3px solid #fff;
    border-radius: 10px;
}