Adding animated captions to Owl carousel

Question

I'm using Owl Carousel and have been trying to add animated captions (just a simple fadein on slide display) but can't seem to figure out how to do it.

I have the opacity of all the captions set to 0 and then add a class named "animate-me" (with jQuery) to the captions. The first one fades in and then all the others are constantly displayed.

Here's what I have so far on jsbin... http://jsbin.com/OGehUKEh/3/edit

Solution 1

You need to use Owl Carousel callbacks. I found the callbacks you need.

$("#owl-example").owlCarousel({
    beforeMove: function(){
        // BEFORE going to the next slide (hide captions)
    }, 
    afterMove: function(){
        // AFTER going to next slide (show captions)
    }
})

Solution 2

I've successfully done this using jCapSlide (http://tympanus.net/codrops/2009/11/23/jcapslide-a-jquery-image-caption-plugin/).

Here's the HTML:

<div class="owl-carousel">
  <div class="item" id="id_a"> <!-- The ID is for jCapSlide -->
    <img alt="text" src="imagelocation"><!-- This is my image -->
    <div class="overlay" style="display:none;"></div> <!-- this is the jCapSlide code -->
    <div class="ic_caption">
      <h3>TITLE To display</h3>
      <p class="ic_text">Caption</p>
    </div>
  </div>
  <div class="item" id="id_b">
    <img alt="text" src="another image">
    <div class="overlay" style="display:none;"></div>
    <div class="ic_caption">
      <h3>Title 2</h3>
      <p class="ic_text">More Text</p>
    </div>
  </div>
  <!-- More pictures in the same fashion as above -->
</div>

Include the CSS in the HEAD

<link rel="stylesheet" href="/css/owl.carousel.css">
<link rel="stylesheet" href="/css/caption/style.css">

Include the JScript just before the

    <script src="/js/jquery-1.11.1.js"></script>
<script src="/js/jquery.capSlide.js"></script>

<script src="/js/owl.carousel.js"></script>
<script  type="text/javascript">
  $(window).load(function(){
    $(".owl-carousel").owlCarousel({responsiveClass:true, autoplay:true, autoplayTimeout: 1000, autoplayHoverPause:true, autoWidth:true, loop:true});

    $("#id_a").capslide({caption_color : '#FFFFFF', caption_bgcolor : '#002296', overlay_bgcolor : '#002296', border : '', showcaption : true});
    $("#id_b").capslide({caption_color : '#FFFFFF', caption_bgcolor : '#002296', overlay_bgcolor : '#002296', border : '', showcaption : true});
 </script>

jCapSlide is very flexible, and you can mess with the CSS and JS to get the exact colours/animation you want.

Debbie