Owl Carousel Four With Caption Animation (Animate CSS) And Customization

You can use animation on the slider to make your website more attractive. Also the slider responsive to all devices and supports all browsers.

Step 1: HTML Code

<section class="slider-area">
    <div class="slider owl-carousel owl-theme">
        <div class="slider-item slider-item-bg-1">
            <div class="d-table">
                <div class="d-table-cell">
                    <div class="container">
                        <div class="slider-text">
                            <span>Your content</span>
                            <h1>Your content</h1>
                            <p>Your content</p>
                            
                            <div class="slider-btn">
                                <a class="default-btn" href="#">
                                    Button
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Step 2: CSS Code

 <link rel="stylesheet" href="css/owl.theme.default.min.css">
 <link rel="stylesheet" href="css/owl.carousel.min.css">
 
.slider-area {
    .owl-item {
        &.active {
            .slider-text {
                span {
                    animation: 1s .1s fadeInUpBig both;
                }
                h1 {
                    animation: 2s .2s fadeInUpBig both;
                }
                p {
                    animation: 3s .3s fadeInUpBig both;
                }
                .slider-btn {
                    animation: 4s .4s fadeInUpBig both;
                }
            }
        }
    }
}

Step 3:  JavaScript Code

<script src="js/owl.carousel.js"></script>
 
$('.slider').owlCarousel({
loop:true,
      margin:0,
      nav:true,
      mouseDrag: false,
      items:1,
      dots: false,
      autoHeight: true,
      autoplay: true,
      smartSpeed:1500,
      autoplayHoverPause: true,
      animateOut: "slideOutDown",
      animateIn: "slideInDown",
      navText: [
      	"<i class='bx bx-chevron-left bx-fade-left'></i>",
           "<i class='bx bx-chevron-right bx-fade-right'></i>",
            ],
      });