Dynamic Vertical Swiper Slider with Image and Text Features

Showcase your content with an elegant vertical Swiper slider featuring custom pagination, Bootstrap 5 styling, and responsive design for an engaging user experience.

HTML

CSS

#swiper_slider_4 .swiper {
     max-height: 600px;
}
 #swiper_slider_4 .d-flex.align-items-center {
     margin: 0 -15px;
     padding: 100px 0;
}
 #swiper_slider_4 .first_column .left_text, #swiper_slider_4 .first_column .img, #swiper_slider_4 .right_text, #swiper_slider_4 .left_img, #swiper_slider_4 .center_text, #swiper_slider_4 .right_img, #swiper_slider_4 .center_img {
     flex: 0 0 33.33%;
     width: 33.33%;
     padding: 0 15px;
}
 #swiper_slider_4 img {
     width: 100%;
     height: 400px;
     object-fit: cover;
}
 #swiper_slider_4 .first_column {
     position: relative;
}
 #swiper_slider_4 .number {
     font-weight: 600;
     font-size: 30px;
     letter-spacing: 1px;
}
 #swiper_slider_4 h2 {
     margin: 0;
     text-transform: capitalize;
     font-size: 50px;
     font-weight: 600;
}
 #swiper_slider_4 .right_text p {
     margin: 0;
}
 #swiper_slider_4 .center_text p, #swiper_slider_4 .third_column .right_text p {
     margin-top: 20px;
     margin-bottom: 0;
}
 #swiper_slider_4 .third_column .right_text p {
     padding: 0;
}
 #swiper_slider_4 .swiper-button-prev:after, #swiper_slider_4 .swiper-rtl .swiper-button-next:after {
     content: '\f148';
     font-family: bootstrap-icons !important;
     color: #000;
     font-size: 20px;
}
 #swiper_slider_4 .swiper-button-next:after, #swiper_slider_4 .swiper-rtl .swiper-button-prev:after {
     content: '\f128';
     font-family: bootstrap-icons !important;
     color: #000;
     font-size: 20px;
}
 #swiper_slider_4 .swiper_btn {
     position: absolute;
     top: 50%;
     right: 0;
     transform: translateY(-50%);
     z-index: 1;
}
 #swiper_slider_4 .swiper-button-prev, #swiper_slider_4 .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;
     background: #ececec;
     width: 60px;
     height: 60px;
     border: 1px solid #d9d9d9;
}
 #swiper_slider_4 .swiper-pagination-bullet {
     background-color: #000;
     opacity: 1;
     position: relative;
     margin: 0px 12px !important;
}
 #swiper_slider_4 .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 .4s;
}
 #swiper_slider_4 .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
     border-color: #000;
}
 #swiper_slider_4 .swiper-pagination {
     bottom: 15px;
     transform: none;
     left: 50%;
     top: auto;
     display: flex;
}
 @media (max-width: 768px){
     #swiper_slider_4{
         margin-top: 50px;
    }
     #swiper_slider_4 .first_column .left_text, #swiper_slider_4 .first_column .img, #swiper_slider_4 .right_text, #swiper_slider_4 .left_img, #swiper_slider_4 .center_text, #swiper_slider_4 .right_img, #swiper_slider_4 .center_img{
         width: 100%;
         flex: 0 0 100%;
    }
     #swiper_slider_4 .d-flex.align-items-center{
         flex-wrap: wrap;
         padding: 0;
    }
     #swiper_slider_4 .swiper{
         max-height: 88vh;
    }
     #swiper_slider_4 img {
         width: 50%;
         height: 300px;
         object-fit: cover;
    }
     #swiper_slider_4 .first_column .img{
         text-align: center;
         margin: 20px 0;
    }
     #swiper_slider_4 .sec_column .left_img{
         margin-bottom: 20px;
         text-align: right;
    }
     #swiper_slider_4 .sec_column .center_text{
         margin-bottom: 20px;
    }
     #swiper_slider_4 .third_column .center_img{
         order: 2;
         text-align: right;
    }
     #swiper_slider_4 .third_column .right_text{
         margin: 30px 0;
    }
     #swiper_slider_4 .swiper-slide{
         opacity: 0;
         transition: all .4s;
    }
     #swiper_slider_4 .swiper-slide.swiper-slide-active{
         opacity: 1;
    }
}
 @media (max-width: 576px){
     #swiper_slider_4 h2{
         font-size: 30px;
    }
     #swiper_slider_4 img{
         width: 30%;
         height: 170px;
    }
     #swiper_slider_4 .third_column .right_text {
         margin: 10px 0;
    }
}

JS

Width:

Height:

Discover the ultimate way to display your content with this dynamic vertical Swiper slider. Designed for a captivating user experience, this slider offers smooth vertical transitions and automatic playback. It features eye-catching image and text combinations, custom pagination, and intuitive navigation buttons. Perfect for showcasing products, services, or promotional content, this slider adapts seamlessly to various screen sizes and ensures a visually engaging presentation. Ideal for modern websites seeking to enhance visual appeal and user interaction.