Owlcarousel2: Owl Carousel and mousewheel JS.

Created on 14 Oct 2014  路  2Comments  路  Source: OwlCarousel2/OwlCarousel2

Hi, thanks for great plugin!
I'm using Owl Carousel 2 with mousewheel.js. it's working fine, but when I set loop: false and I scroll to last or first item my mouse not working, how can I make mouse back to page scrolling when I go to first or last item ?
For example:

  • My slides : 1 2 3 4 5
  • Set loop: false and using mousewhell
  • When I scroll to slide 5 I want to scroll down of the page, not return to slide 1. Also scroll up of the page when I scroll to slide 1.
    Can we do that?
    Thanks for support !
question

Most helpful comment

let owl = document.getElementsByClassName('owl-stage');

      owl[0].addEventListener('mousewheel', e => {
        if (e.deltaY > 0) {
          $('.owl-carousel').trigger('next.owl', 0);
        } else {
          $('.owl-carousel').trigger('prev.owl', 0);
        }
        e.preventDefault();
      }, false);

All 2 comments

My mousewheel not working on my code.

$(document).ready(function() {
var owl = $("#quizcarousel");

        owl.owlCarousel({
            itemsCustom: [
                [0, 1],
                [450, 1],
                [600, 2],
                [700, 2],
                [1000, 3],
                [1200, 4],
                [1400, 4],
                [1600, 5]
            ],
            navigation: true,
            loop:true,
            nav:true,
             useMouseWheel: true,
            navigationText: ["", ""],
            pagination: false,
            paginationNumbers: false
        });
        owl.on('mousewheel', '.owl-stage', function (e) {
          if (e.deltaY>0) {
              owl.trigger('next.owl');
          } else {
              owl.trigger('prev.owl');
          }
          e.preventDefault();
      });

});

let owl = document.getElementsByClassName('owl-stage');

      owl[0].addEventListener('mousewheel', e => {
        if (e.deltaY > 0) {
          $('.owl-carousel').trigger('next.owl', 0);
        } else {
          $('.owl-carousel').trigger('prev.owl', 0);
        }
        e.preventDefault();
      }, false);
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Dipak-Chandran picture Dipak-Chandran  路  3Comments

garethjenkinsit picture garethjenkinsit  路  4Comments

mkraha picture mkraha  路  4Comments

SoufianeAbid picture SoufianeAbid  路  3Comments

siwel picture siwel  路  3Comments