0

I'm working on a bootstrap carousel in which it shows the image first and then the caption slides in from the right after a few seconds. It works but there's an issue with the first slide, where it shows the caption of the first slide when it moves to the second it only is being hidden after a second and then the new caption slides in.

This is my code:

<div class="carousel-inner">

<div class="item active">
  <img src="test.png" alt="Chicago">
  <div class="carousel-caption">
   <div class="carousel-caption-inner"  data-interval="2000">
      <p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green" id="banner-change">specialists?</span></p>
    <p class="slider-text">We just do ip</p>
      <p class="slider-text"><span class="slider-green">exceptionally</span></p>
  </div>
</div>
  </div>
  <div class="item">
  <img src="test.png" alt="Chicago">
  <div class="carousel-caption">
   <div class="carousel-caption-inner">
      <p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">distinctive?</span></p>
    <p class="slider-text">Market leading</p>
      <p class="slider-text"><span class="slider-green"> brought to life</span> and outside london</p>
  </div>
</div>
  </div>
  <div class="item">
  <img src="test.png" alt="Chicago">
  <div class="carousel-caption">
   <div class="carousel-caption-inner">
      <p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">stand out?</span></p>
       <p class="slider-text">The <span class="slider-green">only way</span> to do great work is to love what you do</p>
  </div>
</div>
  </div>



<div class="item">
  <img src="test.png" alt="Los Angeles">
  <div class="carousel-caption">
   <div class="carousel-caption-inner">
      <p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">the right choice?</span></p>
    <p class="slider-text">holistic thinking,<span class="slider-green"> made real</span></p>

  </div>
</div>
  </div>

<div class="item">
  <img src="test.png" alt="New York">
 <div class="carousel-caption">
   <div class="carousel-caption-inner">
      <p class="slider-text small"><span class="slider-padding">what makes</span> us <span class="slider-green">effective?</span></p>
    <p class="slider-text">Intellectual property</p>
      <p class="slider-text">- <span class="slider-green"> brought to life</span></p>
  </div>
</div>
  </div>
  </div>
   </div>

And:

<script type="text/javascript">
  var carouselContainer = $('.carousel');
  var slideInterval = 3000;

  $( document ).ready(function() {       
   function toggleCaption() {
     $('.carousel-caption').hide();
        var caption = 
      carouselContainer.find('.active').find('.carousel-
       caption');
        caption.delay(1000).toggle("slide", {direction:'right'});
       }

 carouselContainer.carousel({
 interval: slideInterval,
 cycle: true,
 pause: "hover"
   }).on('slid.bs.carousel', function() {
  toggleCaption();
  });

 });
 </script>

Anybody know how I could fix this? It seems the function is only activated on the second slide, not the first.

Touheed Khan
  • 2,149
  • 16
  • 26
MariaL
  • 1,112
  • 2
  • 16
  • 41

1 Answers1

0

Use https://daneden.github.io/animate.css/ like this. you just need to change the animation class in data-animation attribute.

(function( $ ) {

 //Function to animate slider captions 
 function doAnimations( elems ) {
  //Cache the animationend event in a variable
  var animEndEv = 'webkitAnimationEnd animationend';
  
  elems.each(function () {
   var $this = $(this),
    $animationType = $this.data('animation');
   $this.addClass($animationType).one(animEndEv, function () {
    $this.removeClass($animationType);
   });
  });
 }
 
 //Variables on page load 
 var $myCarousel = $('#carousel-1-z'),
  $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
  
 //Initialize carousel 
 $myCarousel.carousel();
 
 //Animate captions in first slide on page load 
 doAnimations($firstAnimatingElems);
 
 //Pause carousel  
 $myCarousel.carousel('pause');
 
 
 //Other slides to be animated on carousel slide event 
 $myCarousel.on('slide.bs.carousel', function (e) {
  var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
  doAnimations($animatingElems);
 });  
 
})(jQuery);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <div class="my-carosuel">
     <div id="carousel-1-z" class="carousel slide">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-1-z" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-1-z" data-slide-to="1"></li>
            <li data-target="#carousel-1-z" data-slide-to="2"></li>
          </ol>
<div class="carousel-inner">
<!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
    
            
            <!-- First slide -->
            <div class="item active">
              <img src="http://www.placehold.it/1000x400" class="img-responsive">
              <div class="carousel-caption">
                <h3 data-animation="animated bounceInLeft" class="heading-active">
                 <a href="">animation test one</a>
                </h3>
                <h3 data-animation="animated flip">
                 <a href="">animation test two</a>
                </h3>
                <h3 data-animation="animated slideInDown">
                 <a href="">animation test three</a>
                </h3>
              </div>
            </div><!-- /.item -->
    
            <!-- Second slide -->
            <div class="item">
              <img src="http://www.placehold.it/1000x400" class="img-responsive">
              <div class="carousel-caption">
                <h3 data-animation="animated bounceInLeft" class="heading-active">
                 <a href="">animation test one</a>
                </h3>
                <h3 data-animation="animated flip">
                 <a href="">animation test two</a>
                </h3>
                <h3 data-animation="animated slideInDown">
                 <a href="">animation test three</a>
                </h3>
              </div>
            </div><!-- /.item -->
    
          </div><!-- /.carousel-inner -->
          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-1-z" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
          <a class="right carousel-control" href="#carousel-1-z" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div><!-- /.carousel -->
    </div>
Zaid Bin Khalid
  • 748
  • 8
  • 25