<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css"> <div class="container"> <div class="row heading-box"> <h2 class="text-center">Bootstrap 4 slider with Text Animation</h2> </div> </div> <section> <div id="slider-animation" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://cpgolfacademy.com/wp-content/uploads/2015/05/home-testimonial-bg.jpg" alt="Los Angeles"> <div class="text-box"> <h2 class="wow slideInRight" data-wow-duration="2s">This is heading text</h2> <p class="wow slideInLeft" data-wow-duration="2s">There is now an abundance of readable dummy texts. These are usually used when a text is required purely to fill a space. </p> </div> </div> <div class="carousel-item"> <img src="http://www.omlogic.com/images/vivo-ipl-bg.png" alt="Los Angeles"> <div class="text-box"> <div class="row align-items-center"> <div class="col-md-6"> <h2 class="wow fadeInUp" data-wow-duration="4s">This is heading text</h2> <p class="wow fadeInUp" data-wow-duration="2s">There is now an abundance of readable dummy texts. These are usually used when a text is required purely to fill a space. </p> </div> <div class="col-md-6 wow slideInLeft" data-wow-duration="4s"> <img src="https://marutiprodcdn.azureedge.net/-/media/images/maruti/marutisuzuki/car/car-profile-shots/full-range-side-shot.ashx?modified=20181217042135&h=342&w=500&la=en&hash=821C3E5E1634D214529113B55002D04E7826D57F"> </div> </div> </div> </div> <div class="carousel-item"> <img src="http://www.ingrammicrocloud.in/wp-content/uploads/sites/50/2019/01/Case-Study-BG.jpg" alt="Chicago"> <div class="text-box"> <div class="row align-items-center"> <div class="col-md-6 wow slideInRight" data-wow-duration="4s"> <h2>This is heading text</h2> <p>There is now an abundance of readable dummy texts. These are usually used when a text is required purely to fill a space. </p> </div> <div class="col-md-6 wow slideInLeft" data-wow-duration="4s"> <img src="http://www.branding24x7.com/wp-content/uploads/2017/12/web-design-icon-2.png"> </div> </div> </div> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#slider-animation" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#slider-animation" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </section>

#slider-animation{max-height:550px;} .heading-box h2{ width:100%; color: red; } h2, p{color:#fff;} .carousel-item img{width:100%;} .text-box { position: absolute; top: 50%; left: 15%; right: 15%; color: #000; transform: translateY(-50%); }

wow = new WOW( { animateClass: 'animated', offset: 100, callback: function(box) { console.log("WOW: animating <" + box.tagName.toLowerCase() + ">") } } ); wow.init(); document.getElementById('moar').onclick = function() { var section = document.createElement('section'); section.className = 'section--purple wow fadeInDown'; this.parentNode.insertBefore(section, this); };