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

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

python - How to remove the Xframe Options header in django? -