Flexslider Custom Next / Previous Buttons
Asked Answered
P

1

10

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.

Pulsatile answered 14/8, 2013 at 18:25 Comment(0)
L
28

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

Lamprey answered 14/8, 2013 at 18:41 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.