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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With