CODEWITHSUNDEEP
cssslidercarouselflexslider
user1049944
user1049944

Reputation:

Flexslider Custom Next / Previous Buttons

I used to use the jQuery Cycle plugin as I liked how easy it was to customise, such as inserting custom HTML elements of my choice and simply assigning them 'next' or 'previous' button functionality.

I can't find a way to do this in Flexslider however, I only see an option for custom pagination. E.g. manualControls.

Does anyone know of a way to do this in Flexslider? E.g. set an image or anchor as a 'next' button.

Upvotes: 10

Views: 34420

Answers (1)

drip
drip

Reputation: 12941

How about something like this:

$('.slider').flexslider({
    directionNav: false,
    controlNav: false
})

$('.prev').on('click', function(){
    $('.slider').flexslider('prev');
    return false;
})

$('.next').on('click', function(){
    $('.slider').flexslider('next');
    return false;
})

Demo

Or if you don't wan't to write it 2 times, you can do this too:

$('.slider').flexslider({
    directionNav: false,
    controlNav: false
})

$('.prev, .next').on('click', function(){
    var href = $(this).attr('href');
    $('.slider').flexslider(href);
    return false;
})

Demo v2

Upvotes: 28

Related Questions