1

Is there a way to enable mouse scroll (up-down) to control the slides similar to the keys on keyboard?

I am experimenting with Jssor grid slider in particular.

user247702
  • 23,641
  • 15
  • 110
  • 157
Soong
  • 147
  • 2
  • 11

1 Answers1

3

First you'll want to detect the direction of scroll and perhaps the distance then from this you can navigate the slide show:

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       $Next() // next slide
   } else {
      $Prev() // prev slide
   }
   lastScrollTop = st;
});
Community
  • 1
  • 1
Ryan Brodie
  • 6,554
  • 8
  • 40
  • 57
  • 1
    yes, detect mouse scroll and then call jssor slider api (jssor_slider1.$Next or jssor_slider1.$Prev) – jssor Apr 27 '14 at 11:52
  • Thanks for both your answers. However mouse scroll to activate next/prev slide only work when the scroll bar is present, ie after a few scrolls, and when the scroll bar hits the bottom, I can no longer scroll to next slide. Is there a way to overcome this? Btw, my slides scroll vertically and I have tested that the behavior of inability to scroll is consistent on Chrome, IE and Firefox... Thank you – Soong Apr 27 '14 at 13:39
  • I reckon you'll be better of using a library, checkout this [plugin](https://github.com/jkat98/scrollToggle). – Ryan Brodie Apr 27 '14 at 15:58
  • That way you can do this: `$('#swipe').bind('swipeup', $Prev);` :) – Ryan Brodie Apr 27 '14 at 15:59
  • You'd detect and handle mousewheel event. – jssor Apr 27 '14 at 22:51