javascript - jQuery using arrow key scrolling during presentation -
i'm creating presentation using html project i'm working on. presentation full-page slides , want implement script jquery when arrow keys pressed, scrolls smoothly between slides. left being previous slide , right being next slide obviously.
i wrote script works first time. i'm new jquery , can't seem fix it.
<script type="text/javascript"> $(document).keydown(function(e){ if (e.keycode == 37) { $('.slide').prev().scrollto({ duration: 2000, easing: 'linear' }); } if (e.keycode == 39) { $('.slide').next().scrollto({ duration: 2000, easing: 'linear' }); } }); </script>
see example: http://jsfiddle.net/kevalbhatt18/0tue685a/
$(document).keydown(function (e) { // console.log($('[class ^=slide]')) if (e.keycode == 37) { if ($('#container').find('.scroll').prev()[0]) { $("html, body").animate({ scrolltop: $($('#container').find('.scroll').prev()[0]).offset().top }, 1000); console.log($($('#container').find('.scroll').prev()[0]).addclass('scroll')) console.log($($('#container').find('.scroll')[1]).removeclass('scroll')) } else { $("html, body").animate({ scrolltop: $($('#container').children()[$('#container').children().length - 1]).offset().top }, 1000); $($('#container').children()[$('#container').children().length - 1]).addclass('scroll') $($('#container').find('.scroll')[0]).removeclass('scroll') } } if (e.keycode == 39) { if ($('#container').find('.scroll').next()[0]) { $("html, body").animate({ scrolltop: $($('#container').find('.scroll').next()[0]).offset().top }, 1000); $($('#container').find('.scroll').next()[0]).addclass('scroll') $($('#container').find('.scroll')[0]).removeclass('scroll') } else { $("html, body").animate({ scrolltop: $($('#container').children()[0]).offset().top }, 1000); $($('#container').children()[0]).addclass('scroll') console.log($($('#container').children()[0])) $($('#container').find('.scroll')[1]).removeclass('scroll') } } });
Comments
Post a Comment