"Bootstrap 4 Carousel with Text Animation"
Bootstrap 4.1.1 Snippet by gauravmeena0708

<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="//code.jquery.com/jquery-1.11.1.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"> <h1 class="red-color">Bootstrap 4 carousel</h1> <p class="text-p">This is <strong>bootstrap 4 slider</strong> width animations effects on text and image </p> </div> </div> <section> <div id="slider-animation-2" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#slider-animation-2" data-slide-to="0" class="active"></li> <li data-target="#slider-animation-2" data-slide-to="1"></li> <li data-target="#slider-animation-2" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://vignette.wikia.nocookie.net/bproject/images/8/86/Moons_Artists_bg.jpg/revision/latest?cb=20150920235308" 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="https://nicesmile.ca/wp-content/uploads/2016/12/parallax-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 class="carousel-item"> <img src="http://yoncatemelgida.com/images/bg.jpg" alt="New York"> <div class="text-box"> <div class="row align-items-center"> <div class="col-md-6 wow slideInLeft" 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 fadeInUp" 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> <!-- Left and right controls --> <a class="carousel-control-prev" href="#slider-animation-2" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#slider-animation-2" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </section>
.text-box { position: absolute; top: 50%; left: 15%; right: 15%; color: #000; transform: translateY(-50%); } #slider-animation-2 .carousel-item img{width:100%;} .text-box img {width:100%} .red-color{color:red; font-size:60px; text-align:center; margin-bottom:20px; margin-top:40px; text-transform:uppercase; width:100%;} .text-p{text-align:center; width:100%; margin-bottom:60px;}
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); };

Related: See More


Questions / Comments: