Bootstrap Karussell Titel Animation nur aktiviert auf der zweiten Folie

Question

Ich arbeite an einem Bootstrap Karussell, in dem es zuerst das Bild zeigt und dann die Beschriftung von rechts nach ein paar Sekunden einschiebt. Es funktioniert, aber es gibt ein Problem mit der ersten Folie, wo es die Beschriftung der ersten Folie zeigt, wenn es auf die zweite Folie nur nach einer Sekunde ausgeblendet wird und dann die neue Beschriftung einschiebt.

Das ist meine 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> 

Und:

<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> 

Jeder weiß, wie ich dieses Problem beheben könnte? Es scheint, dass die Funktion nur auf der zweiten Folie aktiviert wird, nicht auf der ersten.

Answer 1

Verwenden Sie https://daneden.github.io/animate.css/ wie folgt. Sie müssen nur die Animationsklasse in Datenanimation Attribut ändern.

(function($) { 
 

 
\t //Function to animate slider captions 
 
\t function doAnimations(elems) { 
 
\t \t //Cache the animationend event in a variable 
 
\t \t var animEndEv = 'webkitAnimationEnd animationend'; 
 
\t \t 
 
\t \t elems.each(function() { 
 
\t \t \t var $this = $(this), 
 
\t \t \t \t $animationType = $this.data('animation'); 
 
\t \t \t $this.addClass($animationType).one(animEndEv, function() { 
 
\t \t \t \t $this.removeClass($animationType); 
 
\t \t \t }); 
 
\t \t }); 
 
\t } 
 
\t 
 
\t //Variables on page load 
 
\t var $myCarousel = $('#carousel-1-z'), 
 
\t \t $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']"); 
 
\t \t 
 
\t //Initialize carousel 
 
\t $myCarousel.carousel(); 
 
\t 
 
\t //Animate captions in first slide on page load 
 
\t doAnimations($firstAnimatingElems); 
 
\t 
 
\t //Pause carousel 
 
\t $myCarousel.carousel('pause'); 
 
\t 
 
\t 
 
\t //Other slides to be animated on carousel slide event 
 
\t $myCarousel.on('slide.bs.carousel', function (e) { 
 
\t \t var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']"); 
 
\t \t doAnimations($animatingElems); 
 
\t }); 
 
\t 
 
})(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"> 
 
    \t <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"> 
 
       \t <a href="">animation test one</a> 
 
       </h3> 
 
       <h3 data-animation="animated flip"> 
 
       \t <a href="">animation test two</a> 
 
       </h3> 
 
       <h3 data-animation="animated slideInDown"> 
 
       \t <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"> 
 
       \t <a href="">animation test one</a> 
 
       </h3> 
 
       <h3 data-animation="animated flip"> 
 
       \t <a href="">animation test two</a> 
 
       </h3> 
 
       <h3 data-animation="animated slideInDown"> 
 
       \t <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>