Owl carousel caption mit animieren.css

ich versuche, mich Beschriftungen in owl carousel. ich bin mit der Animation.css.
Ich habe Hinzugefügt animation in Beschriftungen im Karussell, aber es funktioniert nicht für alle. Nur die ersten Folien Beschriftung animation. Hier ist mein code;

<div class="owl-carousel owl-theme">

<div class="item"><img src="http://placehold.it/900x1200">
    <div class="caption"><h1 class="animated bounce">First Caption</h1></div>
</div>

<div class="item"><img src="http://placehold.it/900x1200">
    <div class="caption"><h1 class="animated bounce">Second Caption</h1></div>
</div>

<div class="item"><img src="http://placehold.it/900x1200">
    <div class="caption"><h1 class="animated bounce">Third Caption</h1></div>
</div>

<div class="item"><img src="http://placehold.it/900x1200">
    <div class="caption"><h1 class="animated bounce">Fourth Caption</h1></div>
</div>

</div><!-- End Carousel -->

<style>
.caption {
    position: absolute;
    font-size: 1.5em;
    top: 0;
    left: 15px;
    border:1px solid;
    color:orange;
    text-shadow: 2px 2px 1px #000;
    padding-top: 60vh;
}
</style>

<script>
$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    items:1,
    loop:true,
    autoplay:true,
    autoplayTimeout:3500,
    nav:true,    
    })
});
</script>

Warte ich auf Ihre Hilfe, dass. Ich bin stecken

  • haben Sie sich überlegt relabelling Ihre .animated css .active ? wenn Sie formatieren Sie Ihren code in ein jsfiddle werden es einfacher+schneller für die Menschen zu unterstützen.
  • Ja Sie haben Recht, hier ist meine Geige jsfiddle
InformationsquelleAutor Nihat Özyedi | 2017-04-10
  1. 5

    Die animation wird nur einmal angewendet, wenn die Klasse angewendet, um eine div. Also alle Folien animieren, einmal Anfang nur, aber Sie sehen nur das erste div-Element, und so es passiert nichts mehr.

    Wenn Sie die Uhr für dia-änderungen im Karussell und entfernen Sie dann die 'animieren bounce' Klassen aus allen divs, bevor Sie sofort wieder die Anwendung, um die ein-Bild-dann können Sie sehen, jede animieren.

    Versuchen, diese jquery:

    $(document).ready(function() {
  var owl = $('.owl-carousel');

  owl.owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    autoplayTimeout: 3500,
    nav: true,
    margin: 10,
  });

  owl.on('changed.owl.carousel', function(event) {
      var item = event.item.index - 2;     //Position of the current item
      $('h1').removeClass('animated bounce');
 $('.owl-item').not('.cloned').eq(item).find('h1').addClass('animated bounce');
  });

});

    und dann in Ihre html-verwenden Sie nur die 'animieren bounce' - Klassen für die erste Folie (entfernen Sie von den anderen):

    <div id='monitor'>

</div>
<div class="owl-carousel owl-theme">

  <div class="item"><img src="http://placehold.it/200x200">
    <div class="caption">
      <h1 class="animated bounce">First Caption</h1></div>
  </div>

  <div class="item"><img src="http://placehold.it/200x200">
    <div class="caption">
      <h1 class="">Second Caption</h1></div>
  </div>

  <div class="item"><img src="http://placehold.it/200x200">
    <div class="caption">
      <h1 class="">Third Caption</h1></div>
  </div>

  <div class="item"><img src="http://placehold.it/200x200">
    <div class="caption">
      <h1 class="">Fourth Caption</h1></div>
  </div>

</div>
<!-- End Carousel -->
    • ja, seine arbeiten genau das, was ich brauche. Thnks für die Hilfe !
    • Es ist nicht für mich arbeiten.
    • keine Rückmeldung in der console ?
    InformationsquelleAutor Sam0
  2. 0

    Dieser arbeitet unendlich. Schauen Sie sich dieses Beispiel von der Eule.Karussell : http://wpcheatsheet.net/infinite-animated-css-in-owl-carousel/ Sie hatte zu entfernen, Klasse animiert, nach ändern, aber diese Funktion fehlt in owl.Karussell 2: afterMove und beforeMove

    InformationsquelleAutor Web App
Schreibe einen Kommentar