Mousewheel scrolling

Hi 🙂

So I tried to add the following code (as outlined here) inside the class-carousel-slider-script.php file:

_this.on('mousewheel', '.owl-stage', function(e) {																		
   //console.log("x: "+e.originalEvent.deltaX);																		
   //console.log("y: "+e.originalEvent.deltaY);																		
   if(e.originalEvent.deltaX > 100) {																				
      _this.trigger('next.owl');																		
   }																		
   if(e.originalEvent.deltaX < 100) {																				
      _this.trigger('prev.owl');																		
   }																		
   e.preventDefault();
});

I added the code right after the if (jQuery().owlCarousel) { statement inside the jQuery(document).ready(function ($) { function.

Using console.log(), I can see the mouse wheel values coming in steadily, so the function triggers properly and the values look good.
However, triggering next.owl and prev.owl doesn’t seem to work. The carousel always moves to the left, despite trying out different threshold values, or only using either next.owl or prev.owl in the code above. Sometimes, the carousel makes a single motion to the right but immediately moves to the left afterward. Based on that behavior, I assume something is overwriting my command or I am not using the correct command to control the carousel.

Any idea what I need to change to make the carousel respond properly to the input of a mouse wheel?

Any help or pointers are much appreciated!

Thanks 🙂
Markus

• This reply was modified 8 years, 5 months ago by malosch.
• This reply was modified 8 years, 5 months ago by malosch.

Hi all,

Found a solution to prevent the browser from triggering navigating to the next/previous sides when using the touchpad. The solution is the position of e.preventDefault(); (see below).

_this.on('mousewheel wheel DOMMouseScroll MozMousePixelScroll', '.owl-stage', _.throttle(function(e) { // attaching mousewheel to .owl-stage and using throttling from underscore.js to prevent scrolling events from firing too often
																		//console.log(e.originalEvent.deltaX + " | " + e.originalEvent.deltaY); // debugging scroll distances
																		if(e.originalEvent.deltaY < -35 || e.originalEvent.deltaX > 35) { // condition to trigger carousel to go to next item
																				console.log("trigger NEXT"); // log in console for debugging
																				_this.trigger('next.owl'); // trigger carousel to go to next item
																		} else if (e.originalEvent.deltaY > 35 || e.originalEvent.deltaX < -35 ) { // condition to trigger carousel to go to prev item
																				console.log("trigger PREV"); // log in console for debugging
																				_this.trigger('prev.owl'); // trigger carousel to go to prev item
																		} else {
																				// do nothing
																		}
																}, 150)); // set throttling to 150ms
																_this.on('mousewheel wheel DOMMouseScroll MozMousePixelScroll', '.owl-stage', function(e) { //
																		e.preventDefault(); // prevent default event from being triggered -> prev/next screen in browser
																});

Essentially, the _throttle() function from underscore.js was preventing e.preventDefault() from triggering properly, which is needed to prevent the browser to interpret swipe gestures on the carousel as an attempt to navigate pages. Therefore, we can exclude e.preventDefault() in the function navigating the carousel, and create a new function specifically for e.preventDefault() right after the carousel navigation has been completed.

Hope that makes sense 🙂