Interactive Swiper Slider with Custom Pagination and Dynamic Navigation

Enhance your website with a stylish Swiper slider featuring custom pagination, Bootstrap 5 styling, and a responsive design for showcasing images and content effectively.

HTML

<section id="swiper_slider_3">
    <div class="container">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="row align-items-center">
                        <div class="col-lg-6">
                            <div class="img">
                                <img src="https://freewebsnippets.com/public/frontend/snippet_img/headphone-1.png" alt="" />
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="content">
                                <h2>lorem ipsum</h2>
                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis maiores eius placeat corporis optio veniam soluta at consequatur temporibus ipsum.</p>
                                <ul class="rate">
                                    <li><i class="bi bi-star-fill"></i></li>
                                    <li><i class="bi bi-star-fill"></i></li>
                                    <li><i class="bi bi-star-fill"></i></li>
                                    <li><i class="bi bi-star-fill"></i></li>
                                    <li><i class="bi bi-star"></i></li>
                                </ul>
                                <a href="#0" class="btn btn-primary">discover more</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="row align-items-center">
                        <div class="col-lg-6">
                            <div class="img">
                                <img src="https://freewebsnippets.com/public/frontend/snippet_img/headphone-2.png" alt="" />
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="content">
                                <h2>lorem ipsum</h2>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo eaque, nulla doloribus porro maxime voluptate obcaecati sapiente consequuntur beatae eum.</p>
                                <ul class="rate">
                                    <li><i class="bi bi-star-fill"></i></li>
                                    <li><i class="bi bi-star-fill"></i></li>
                                    <li><i class="bi bi-star-fill"></i></li>
                                    <li><i class="bi bi-star-fill"></i></li>
                                    <li><i class="bi bi-star"></i></li>
                                </ul>
                                <a href="#0" class="btn btn-primary">discover more</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="row align-items-center">
                        <div class="col-lg-6">
                            <div class="img">
                                <img src="https://freewebsnippets.com/public/frontend/snippet_img/headphone-3.png" alt="" />
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="content">
                                <h2>lorem ipsum</h2>
                                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora molestias distinctio ea! Exercitationem enim perspiciatis assumenda laudantium deserunt delectus qui?</p>
                                <ul class="rate">
                                    <li><i class="bi bi-star-fill"></i></li>
                                    <li><i class="bi bi-star-fill"></i></li>
                                    <li><i class="bi bi-star-fill"></i></li>
                                    <li><i class="bi bi-star-fill"></i></li>
                                    <li><i class="bi bi-star"></i></li>
                                </ul>
                                <a href="#0" class="btn btn-primary">discover more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="custom-pagination"></div>
            <div class="swiper_btn">
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
            <div class="social">
                <ul>
                    <li>
                        <a href="#0" class=""><i class="bi bi-whatsapp"></i></a>
                    </li>
                    <li>
                        <a href="#0" class=""><i class="bi bi-facebook"></i></a>
                    </li>
                    <li>
                        <a href="#0" class=""><i class="bi bi-twitter"></i></a>
                    </li>
                    <li>
                        <a href="#0" class=""><i class="bi bi-instagram"></i></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

CSS

#swiper_slider_3 {
    padding: 80px 0;
}
#swiper_slider_3 .custom-pagination {
    position: relative;
    bottom: 0px;
    display: flex;
    justify-content: center;
    z-index: 111;
}
#swiper_slider_3 .custom-pagination img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 0;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #bdbdbd;
    object-fit: contain;
}
#swiper_slider_3 .img img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
}
#swiper_slider_3 .content {
    padding: 30px 0;
    padding-right: 60px;
}
#swiper_slider_3 .content h2 {
    text-transform: capitalize;
    font-size: 50px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 20px;
}
#swiper_slider_3 .content h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 50px;
    border: 1px solid #ae3a36;
    left: 0;
}
#swiper_slider_3 .content p {
    margin-bottom: 10px;
}
#swiper_slider_3 .content ul.rate {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    margin-bottom: 30px;
}
#swiper_slider_3 .content ul.rate li {
    margin-right: 5px;
}
#swiper_slider_3 .content ul.rate li i.bi-star-fill {
    color: #ffa534;
}
#swiper_slider_3 .content a.btn {
    border-radius: 0;
    padding: 10px 30px;
    background: #ae3a36;
    border-color: #ae3a36;
    transition: all 0.4s;
    text-transform: capitalize;
    display: inline-block;
}
#swiper_slider_3 .content a.btn:hover {
    background-color: #8c2e2b;
    border-color: #8c2e2b;
}
#swiper_slider_3 .content:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #f5f5f5;
    width: 90%;
    height: 80%;
    z-index: -1;
    transform: translate(-50%, -50%);
}
#swiper_slider_3 .swiper-button-prev:after,
#swiper_slider_2 .swiper-rtl .swiper-button-next:after {
    content: "\f284";
    font-family: bootstrap-icons !important;
    color: #000;
    font-size: 20px;
}
#swiper_slider_3 .swiper-button-next:after,
#swiper_slider_2 .swiper-rtl .swiper-button-prev:after {
    content: "\f285";
    font-family: bootstrap-icons !important;
    color: #000;
    font-size: 20px;
}
#swiper_slider_3 .swiper_btn {
    position: absolute;
    top: 40px;
    left: 0;
}
#swiper_slider_3 .swiper-button-prev,
#swiper_slider_3 .swiper-button-next {
    left: 0;
    right: 0;
    position: relative;
    top: 0;
    bottom: 0;
    width: fit-content;
    height: fit-content;
    display: flex;
    transform: none;
    margin: 0;
    align-items: center;
}
#swiper_slider_3 .swiper-button-prev {
    margin-bottom: 30px;
}
#swiper_slider_3 .social {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1;
}
#swiper_slider_3 .social ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#swiper_slider_3 .social ul li {
    margin-bottom: 10px;
}
#swiper_slider_3 .social ul li a {
    color: #000;
    transition: all 0.4s;
}
#swiper_slider_3 .social ul li a:hover {
    color: #8c2e2b;
}
@media (max-width: 991px) {
    #swiper_slider_3 .content {
        padding: 30px 40px;
        text-align: center;
    }
    #swiper_slider_3 .content h2:after {
        left: 50%;
        transform: translateX(-50%);
    }
    #swiper_slider_3 .content ul.rate {
        justify-content: center;
    }
    #swiper_slider_3 .content:after {
        top: 55%;
        height: 90%;
    }
    #swiper_slider_3 .swiper_btn {
        top: 70px;
    }
    #swiper_slider_3 .custom-pagination {
        padding: 20px 0;
    }
}
@media (max-width: 576px) {
    #swiper_slider_3 .img img {
        max-height: 280px;
    }
    #swiper_slider_3 .content h2 {
        font-size: 30px;
    }
    #swiper_slider_3 .content:after {
        width: 85%;
    }
}

JS

document.querySelectorAll(".custom-pagination img").forEach((img, index) => {
        img.addEventListener("click", () => {
            swiper.slideTo(index);
        });
    });
});

Width:

Height:

Elevate your website's visual appeal with this interactive Swiper slider, designed to showcase products or features dynamically. This slider incorporates custom image-based pagination for a unique touch and offers smooth slide transitions with autoplay functionality. The stylish design includes prominent navigation buttons and social media links, ensuring a seamless user experience. Ideal for displaying product highlights, promotional content, or gallery images, this slider adapts beautifully to different screen sizes and offers a polished, professional look for any modern website.