How to customize an owl carousel slider with text and image animation?

The slider caption title, paragraph, and button use smooth fadeInUp animation. And background image use heartBeat animation. Also the slider responsive all devices and support all browsers.

Step one – HTML Markup:

<!-- Hero Slider -->
<div id="home" class="hero-slider owl-carousel owl-theme">
    <div class="single-hs-item item-bg1">
        <div class="d-table">
            <div class="d-tablecell">
                <div class="hero-text">
                    <h1>Animation Slider</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
                    <div class="slider-btn">
                    <a href="#" class="custom-btn1">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="single-hs-item item-bg2">
        <div class="d-table">
            <div class="d-tablecell">
                <div class="hero-text">
                    <h1>Animation Slider</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
                    <div class="slider-btn">
                        <a href="#" class="custom-btn1 mr-30">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="single-hs-item item-bg3">
        <div class="d-table">
            <div class="d-tablecell">
                <div class="hero-text">
                    <h1>Animation Slider</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
                    <div class="slider-btn">
                        <a href="#" class="custom-btn1 mr-30">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Hero Slider -->

Step Two- CSS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">

body {font-family: 'Nunito', sans-serif;margin: 0;padding: 0;}
.d-table {width: 100%;height: 100%;display: table;}
.d-tablecell {display: table-cell;vertical-align: middle;}
.custom-btn1 {background-color: #ff3547;color: #fff;border: 1px solid #ff3547;display: inline-block;padding: 12px 30px;text-transform: uppercase;border-radius: 30px;text-decoration: none;}
.custom-btn1:hover {background-color: transparent;text-decoration: none;color: #fff;}
/*
Hero slider style
==========================*/
.hero-slider {position: relative;}
.single-hs-item {height: 700px;background-size: cover;background-position: center center;position: relative;}
.single-hs-item:before {content: '';position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-color: #000;opacity: .6;}
.item-bg1 {
background-image: url(https://techsolutionshere.com/wp-content/uploads/2019/01/s1.jpg);
}
.item-bg2 {
background-image: url(https://techsolutionshere.com/wp-content/uploads/2019/01/s2.jpg);
}
.item-bg3 {
background-image: url(https://techsolutionshere.com/wp-content/uploads/2019/01/s3.jpg);
}
.hero-text {padding: 0 15px;text-align: center;max-width: 1140px;margin-left: auto;margin-right: auto;position: relative;}
.hero-text h1 {color: #fff;font-size: 50px;text-transform: capitalize;font-weight: 600;margin: 0;}
.hero-text p {color: #fff;font-size: 17px;max-width: 600px;margin-left: auto;margin-right: auto;line-height: 30px;margin-top: 20px;margin-bottom: 35px;}
.hero-slider .owl-item.active h1 {-animation: 1s .3s fadeInUp both;}
.hero-slider .owl-item.active p {-webkit-animation: 1s .3s fadeInUp both;animation: 1s .3s fadeInUp both;}
.hero-slider .owl-item.active .slider-btn {-webkit-animation: 1s .3s fadeInUp both;animation: 1s .3s fadeInUp both;}
.owl-carousel .owl-nav button.owl-prev {background-color: #ff3547;position: absolute;left: 0;top: 50%;
color: #fff;font-size: 30px;margin: -40px 0 0;border-radius: 0;height: 50px;width: 50px;}
.owl-carousel .owl-nav button.owl-next {background-color: #ff3547;position: absolute;right: 0;top: 50%;color: #fff;font-size: 30px;margin: -40px 0 0;border-radius: 0;height: 50px;width: 50px;
}
.owl-theme .owl-nav {margin-top: 0;}
.owl-dots {position: absolute;left: 0;right: 0; bottom: 20px;}
.owl-theme .owl-dots .owl-dot span {width: 11px;height: 20px;}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #ff3547;}

@media only screen and (max-width: 600px) {
    .single-hs-item {
        height: 550px;
    }
    .hero-text h1 {
        font-size: 30px;
    }
    .hero-text p {
        font-size: 15px;
        margin-bottom: 25px;
    }
    .owl-carousel .owl-nav button.owl-next {
        top: auto;
        margin: 0;
        bottom: 0px;
    }
    .owl-carousel .owl-nav button.owl-prev {
        top: auto;
        margin: 0;
        bottom: 0px;
    }
    .owl-dots {
        bottom: 10px;
        left: 50px;
        right: 50px;
    }
}

Step Three- JavaScript:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script>
// Hero slider JS
$('.hero-slider').owlCarousel({
animateOut: 'slideOutDown',
animateIn: 'heartBeat',
items:1,
loop:false,
nav:true,
dots: true,
})
</script>