Title: Mousewheel scrolling
Last modified: November 8, 2017

---

# Mousewheel scrolling

 *  Resolved [malosch](https://wordpress.org/support/users/malosch/)
 * (@malosch)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/mousewheel-scrolling/)
 * Hi Sayful,
 * I’m wondering if it is possible to have the carousel scroll by using the mousewheel/
   trackpad? Owl Carousel JS mentions you can simply include the jquery.mousewheel.
   js plugin by using the following code:
 *     ```
       owl.on('mousewheel', '.owl-stage', function (e) {
           if (e.deltaY>0) {
               owl.trigger('next.owl');
           } else {
               owl.trigger('prev.owl');
           }
           e.preventDefault();
       });
       ```
   
 * [See here.](https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html)
 * Can I simply include this in one of the Carousel Slider files? And if so, where?
   
   Any help and pointers are much appreciated.
 * Thanks 🙂
    -  This topic was modified 8 years, 6 months ago by [malosch](https://wordpress.org/support/users/malosch/).

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Thread Starter [malosch](https://wordpress.org/support/users/malosch/)
 * (@malosch)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/mousewheel-scrolling/#post-9671257)
 * Hi 🙂
 * So I tried to add the following code (as outlined [here](https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html))
   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](https://wordpress.org/support/users/malosch/).
    -  This reply was modified 8 years, 5 months ago by [malosch](https://wordpress.org/support/users/malosch/).
 *  Thread Starter [malosch](https://wordpress.org/support/users/malosch/)
 * (@malosch)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/mousewheel-scrolling/#post-9731068)
 * Hi,
 * I was able to implement [jquery.mousewheel.js](https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html)
   to enable mouse wheel/trackpad navigation of the carousel.
 * Before sharing the code and what I have done, beware that there is still a bug.
   When scrolling horizontally on the trackpad to navigate between items, browsers
   interpret that as a gesture and go to the prev/next page. I am aware that this
   is outside of the scope of this thread but I will report back when I have found
   a solution to this.
 * Here’s what I’ve done to add mouse wheel/trackpad functionality to the carousel.
    1. Added [jquery.mousewheel.js](https://github.com/jquery/jquery-mousewheel)
    2. Added [http://underscorejs.org/](http://underscorejs.org/) to be able to prevent
       scrolling events from firing too often.
    3. Added the following code to the **class-carousel-slider-script.php** file inside
       the `if (jQuery().owlCarousel) {` statement
 *     ```
       _this.on('mousewheel wheel DOMMouseScroll MozMousePixelScroll', '.owl-stage', _.throttle(function(e) {
       																		if(e.originalEvent.deltaY < -4 || e.originalEvent.deltaX > 4) { // 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 > 4 || e.originalEvent.deltaX < -4 ) { // 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
       																		}
       																		e.preventDefault();
       															}, 150)); // set throttling to 150ms
       ```
   
    -  This reply was modified 8 years, 5 months ago by [malosch](https://wordpress.org/support/users/malosch/).
    -  This reply was modified 8 years, 5 months ago by [malosch](https://wordpress.org/support/users/malosch/).
 *  Thread Starter [malosch](https://wordpress.org/support/users/malosch/)
 * (@malosch)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/mousewheel-scrolling/#post-9797663)
 * 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 🙂
 *  [pintiles](https://wordpress.org/support/users/pintiles/)
 * (@pintiles)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/mousewheel-scrolling/#post-10332208)
 * Hi Malosch,
 * I’ve postet a question that you maybe already solved with your solution. Can 
   you have a look at it? You can find it here: [https://wordpress.org/support/topic/mobile-touch-navigation/#post-10332189](https://wordpress.org/support/topic/mobile-touch-navigation/#post-10332189)
 * maybe you can help me solve my problem. To be honest: I am at padawan level of
   coding and maybe thats the reason I don’t fully understand your code. If that
   is the solution to my problem, could you maybe give me a step by step walkthrough
   of how I can implement that? Keywords can be enough, I am ready to use google
   🙂 I’d love to hear from you!
 * best
 * Georg

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Mousewheel scrolling’ is closed to new replies.

 * ![](https://ps.w.org/carousel-slider/assets/icon.svg?rev=3102828)
 * [Carousel Slider](https://wordpress.org/plugins/carousel-slider/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/carousel-slider/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/carousel-slider/)
 * [Active Topics](https://wordpress.org/support/plugin/carousel-slider/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/carousel-slider/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/carousel-slider/reviews/)

## Tags

 * [feature](https://wordpress.org/support/topic-tag/feature/)
 * [mousewheel](https://wordpress.org/support/topic-tag/mousewheel/)
 * [scrolling](https://wordpress.org/support/topic-tag/scrolling/)

 * 4 replies
 * 2 participants
 * Last reply from: [pintiles](https://wordpress.org/support/users/pintiles/)
 * Last activity: [7 years, 11 months ago](https://wordpress.org/support/topic/mousewheel-scrolling/#post-10332208)
 * Status: resolved