CODEWITHSUNDEEP
jqueryflexslider
Caspert
Caspert

Reputation: 4363

Change div outside flexslider

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

Upvotes: 1

Views: 475

Answers (1)

DarkAjax
DarkAjax

Reputation: 16223

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

Upvotes: 1

Related Questions