Bootstrap Snippet Bootstrap 4 Carousel with Text Animation using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
#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%);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
   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);
    };
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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