Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unslider JQuery Click Change Slide

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

like image 827
user3479267 Avatar asked Jun 29 '16 17:06

user3479267


1 Answers

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

like image 69
Alex Howes Avatar answered Sep 19 '22 00:09

Alex Howes