Stylish Swiper Slider with Full-Screen Image and Text Overlay

Enhance your website with a stunning Swiper slider featuring a cover flow effect, Bootstrap 5 styling, and responsive design. Perfect for showcasing visual content.

HTML

CSS

#swiper_slider_5 .content {
    position: relative;
    height: 100%;
}
#swiper_slider_5 .swiper {
    height: 100vh;
}
#swiper_slider_5 .content:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    left: 0;
    top: 0;
}
#swiper_slider_5 .content .img {
    height: 100%;
}
#swiper_slider_5 .content .img img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}
#swiper_slider_5 .content .text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #fff;
}
#swiper_slider_5 .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 1;
    position: relative;
    margin: 0px 12px !important;
}

#swiper_slider_5 .swiper-pagination-bullet:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid transparent;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: all 0.4s;
}
#swiper_slider_5 .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
    border-color: #fff;
}
#swiper_slider_5 .swiper-pagination {
    bottom: 20px;
}
#swiper_slider_5 .swiper-button-prev:after,
#swiper_slider_5 .swiper-rtl .swiper-button-next:after {
    content: "\f284";
    font-family: bootstrap-icons !important;
    color: #fff;
    font-size: 25px;
}
#swiper_slider_5 .swiper-button-next:after,
#swiper_slider_5 .swiper-rtl .swiper-button-prev:after {
    content: "\f285";
    font-family: bootstrap-icons !important;
    color: #fff;
    font-size: 25px;
}
#swiper_slider_5 .content h6 {
    text-transform: uppercase;
    color: #24e2b0;
    margin-bottom: 5px;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
}
#swiper_slider_5 .content h2 {
    font-size: 60px;
    text-transform: capitalize;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 20px;
}
#swiper_slider_5 .content h2:before {
    content: "";
    position: absolute;
    width: 50px;
    border-bottom: 1px solid #fff;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
#swiper_slider_5 .content p {
    color: #fff;
    margin-bottom: 30px;
    opacity: 0.8;
}
#swiper_slider_5 .content a.btn {
    border-radius: 5px;
    padding: 10px 30px;
    background: #24e2b0;
    border-color: #24e2b0;
    transition: all 0.4s;
    color: #000;
    text-transform: capitalize;
    font-weight: 600;
}
#swiper_slider_5 .content a.btn:hover {
    background-color: #1ca983;
    border-color: #1ca983;
}
@media (max-width: 991px) {
    #swiper_slider_5 .content .text {
        width: 80%;
    }
}
@media (max-width: 576px) {
    #swiper_slider_5 .content .text {
        width: 90%;
    }
    #swiper_slider_5 .swiper {
        height: 70vh;
    }
    #swiper_slider_5 .content h2 {
        font-size: 30px;
    }
}

JS

Width:

Height:

Elevate your website’s visual appeal with our stylish Swiper slider, designed to create a captivating full-screen experience. Featuring a dynamic coverflow effect, this slider showcases high-quality images with a sleek text overlay that includes captivating headlines and compelling calls to action. The customizable pagination and navigation buttons ensure an intuitive user experience. Perfect for showcasing featured content, promotions, or key messages, this slider adapts seamlessly to different screen sizes, making it an ideal choice for modern websites looking to make a strong impression.