Flexslider Custom Next / Previous Buttons

Question

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.

Answer 1

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