Question

I was wondering if it is possible to change some text on the slides of the flexslider. For example, if slide 1 is activate it shows "First slide" as text outside flexslider. When slide 2 is activate, the text will fade to "Second slide" outside flexslider.

Is this possible? Or can I make a caption, and fade in and out that caption?

My JS Fiddle: http://jsfiddle.net/7Wq4a

$('.flexslider').flexslider({
    animation: "slide",
    controlNav: true,
    directionNav: true
});  
Was it helpful?

Solution

I suggest you use the property currentSlide, and trigger the change on the after event something like this:

$('.flexslider').flexslider({
    animation: "slide",
    controlNav: true,
    directionNav: true,
    after: function(slider){
        var newtext = '';
        switch(slider.currentSlide){
            case 0: newtext = "First Slide";
                break;
            case 1: newtext = "Second Slide";
                break;
            case 2: newtext = "Third Slide";
                break;
        }
        $('#text_outside').html(newtext);
    }
});  

Working JSFiddle Demo

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top