Unslider JQuery Click Change Slide

Question

Im building my portfolio site at the moment and have an Unslider.com gallery on the case studies page. I want the user to be able to click the next or previous buttons I have created myself and given the class names to called .next and .prev. Here is my JQuery code.

jQuery(document).ready(function($) {

    var slider = $('.gallery').unslider({
        autoplay : true,
        arrows : false,
        nav : false,
        animation : 'fade',
    });

    slider.on('unslider.ready', function() {
        $(".prev").click(function() {
            unslider('animate:prev');
        });
    });

    slider.on('unslider.ready', function() {
        $(".next").click(function() {
            unslider('animate:next');
        });
    });

});

I know Unslider comes with next and previous buttons but I need to do this myself for the intended effect. Any suggestions to why the code isn't working would be appreciated. I know the JQuery click is linked to the right html elements because I tried adding an alert onto the function when I clicked the element and it displayed the alert correctly.

Thanks, Jamie

Answer 1

Not used unslider before, but I think

unslider('animate:next');

and

unslider('animate:prev');

needs to be

slider.unslider('next');

and

slider.unslider('prev');

Note: you need to reference the unslider method on the slider variable you created