Stylish Swiper Slider with Cube Transition and Interactive Features

Create an engaging Swiper slider with a dynamic cube effect, custom navigation buttons, and a stylish design using Bootstrap 5. Perfect for showcasing products.

HTML

<section id="swiper_slider_2">
        <div class="swiper swiper-2">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <div class="swipper_inner">
                                    <h6>lorem ipsum</h6>
                                    <h2>Contrary to popular</h2>
                                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto, recusandae?</p>
                                    <ul>
                                        <li>
                                            <a href="#" class="btn btn-primary" id="">Shop Now</a>
                                            <a href="#" class="btn btn-secondary" id="">Contact Us</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="product_img">
                                    <img src="https://freewebsnippets.com/public/frontend/snippet_img/cycle-1.png" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <div class="swipper_inner">
                                    <h6>lorem ipsum</h6>
                                    <h2>Lorem ipsum dolor</h2>
                                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto, recusandae?</p>
                                    <ul>
                                        <li>
                                            <a href="#" class="btn btn-primary" id="">Shop Now</a>
                                            <a href="#" class="btn btn-secondary" id="">Contact Us</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="product_img">
                                    <img src="https://freewebsnippets.com/public/frontend/snippet_img/cycle-2.png" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <div class="swipper_inner">
                                    <h6>lorem ipsum</h6>
                                    <h2>Lorem ipsum dolor</h2>
                                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto, recusandae?</p>
                                    <ul>
                                        <li>
                                            <a href="#" class="btn btn-primary" id="">Shop Now</a>
                                            <a href="#" class="btn btn-secondary" id="">Contact Us</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="product_img">
                                    <img src="https://freewebsnippets.com/public/frontend/snippet_img/cycle-3.png" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </section>

CSS

#swiper_slider_2 {
    background: url(https://freewebsnippets.com/public/frontend/snippet_img/banner-img.jpg);
    width: 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    height: auto;
    padding: 100px 0;
}

#swiper_slider_2 .product_img img {
    width: 100%;
}

#swiper_slider_2 .swipper_inner {
    color: #fff;
    margin: 50px 0;
}

#swiper_slider_2 .swipper_inner h6 {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 0;
}

#swiper_slider_2 .swipper_inner h2 {
    font-size: 60px;
    text-transform: capitalize;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

#swiper_slider_2 .swipper_inner p {
    margin-bottom: 20px;
    opacity: 0.8;
}

#swiper_slider_2 .swipper_inner ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#swiper_slider_2 .swipper_inner ul li a {
    border-radius: 0;
    padding: 10px 35px;
    text-transform: capitalize;
}

#swiper_slider_2 .swipper_inner ul li a.btn-primary {
    background-color: #ff6501;
    border-color: #ff6501;
    margin-right: 10px;
}

#swiper_slider_2 .swipper_inner ul li a.btn-secondary {
    background-color: #f5f5f5;
    border-color: #f5f5f5;
    color: #000;
}

#swiper_slider_2 .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 1;
    position: relative;
    margin: 0px 12px !important;
}

#swiper_slider_2 .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_2 .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
    border-color: #fff;
}
#swiper_slider_2 .swiper-pagination {
    bottom: -50px;
    transform: none;
}
#swiper_slider_2 .swiper-button-prev:after,
#swiper_slider_2 .swiper-rtl .swiper-button-next:after {
    content: "\f284";
    font-family: bootstrap-icons !important;
    color: #fff;
    font-size: 25px;
}
#swiper_slider_2 .swiper-button-next:after,
#swiper_slider_2 .swiper-rtl .swiper-button-prev:after {
    content: "\f285";
    font-family: bootstrap-icons !important;
    color: #fff;
    font-size: 25px;
}
@media (max-width: 991px) {
    #swiper_slider_2 .swiper-pagination {
        bottom: 0;
    }
}
@media (max-width: 767.9px) {
    #swiper_slider_2 {
        padding-top: 50px;
        padding-bottom: 70px;
    }
    #swiper_slider_2 .swipper_inner h2 {
        font-size: 50px;
    }
    #swiper_slider_2 .swipper_inner {
        margin-top: 0;
    }
#swiper_slider_2 .swipper_inner ul li a{
  padding: 10px 25px;
}
}

JS

Width:

Height:

Showcase your products or promotions with this stylish Swiper slider featuring a dynamic cube transition effect. Designed to captivate attention, this slider includes auto-play functionality with a 3-second delay, interactive navigation controls, and pagination. The full-width design with high-quality images and compelling text overlays makes it perfect for engaging presentations. The responsive layout ensures optimal display on all devices, while the bold call-to-action buttons encourage user interaction with 'Shop Now' and 'Contact Us' options.