Adding animated captions to Owl carousel

javascript jquery css css-transitions owl-carousel
user736129 picture user736129 · Nov 18, 2013 · Viewed 20.7k times · Source

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

Answer

Dennis Johnsen picture Dennis Johnsen · Feb 11, 2014

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

Related questions

Slide down animation from display:none to display:block?

Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way? HTML: <div id="box"> Initial …

Read More
How to stop CSS3 transition

I want to stop a transition that is in progress. I have found a few references[1][2] scattered around the internet but I can't seem to piece it together. Here's a fiddle of the first suggestion (With jQuery and CSS Transit …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More