我们如何使用 Multiple Owl Carousel 添加鼠标滚轮？答案

【问题标题】：how can we add mousewheel with Multiple Owl Carousel?我们如何使用 Multiple Owl Carousel 添加鼠标滚轮？
【发布时间】：2021-03-29 13:10:32
【问题描述】：

我的项目涉及使用Owl Carousel 创建团队和博客等。我正在使用Owl Carousel。

我在一个页面中使用了两次 Owl Carousel，所以我尝试使用 mousewheel 移动，但它适用于最后一个 Owl Slider，但不适用于其他滑块。！

HTML

<div class="v2-team-section">
<div class="container">
<div id="v2-team-carousel" class="team-main owl-carousel">
  <div class="team">
    <div class="team-image" style="background-image: url(images/works-1.jpg);"></div>
    <div class="team-detail">
      <div class="team-name">Jhon Smith</div>
      <div class="team-category">Photographer + Cat Lover</div>
      <div class="team-social">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-dribbble"></i></a>
      </div>
    </div>
  </div>
  <div class="team">
    <div class="team-image" style="background-image: url(images/works-1.jpg);"></div>
    <div class="team-detail">
      <div class="team-name">Jhon Smith</div>
      <div class="team-category">Photographer + Cat Lover</div>
      <div class="team-social">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-dribbble"></i></a>
      </div>
    </div>
  </div>
  <div class="team">
    <div class="team-image" style="background-image: url(images/works-1.jpg);"></div>
    <div class="team-detail">
      <div class="team-name">Jhon Smith</div>
      <div class="team-category">Photographer + Cat Lover</div>
      <div class="team-social">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-dribbble"></i></a>
      </div>
    </div>
  </div>
  <div class="team">
    <div class="team-image" style="background-image: url(images/works-1.jpg);"></div>
    <div class="team-detail">
      <div class="team-name">Jhon Smith</div>
      <div class="team-category">Photographer + Cat Lover</div>
      <div class="team-social">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-dribbble"></i></a>
      </div>
    </div>
  </div>
  <div class="team">
    <div class="team-image" style="background-image: url(images/works-1.jpg);"></div>
    <div class="team-detail">
      <div class="team-name">Jhon Smith</div>
      <div class="team-category">Photographer + Cat Lover</div>
      <div class="team-social">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-dribbble"></i></a>
      </div>
    </div>
  </div>
 </div>
 </div>
  </div>


<div class="v2-blog-section">
<div class="container">
<div id="v2-blog-carousel" class="home-blog-main owl-carousel">
  <div class="blog-col">
    <div class="blog-image" style="background-image: url(images/works-1.jpg);"></div>
    <div class="blog-detail">
      <a href="#" class="blog-title">The Role design plays in our daily life</a>
    </div>
  </div>
  <div class="blog-col">
    <div class="blog-image" style="background-image: url(images/works-1.jpg);"></div>
    <div class="blog-detail">
      <a href="#" class="blog-title">The Role design plays in our daily life</a>
    </div>
  </div>
  <div class="blog-col">
    <div class="blog-image" style="background-image: url(images/works-1.jpg);"></div>
    <div class="blog-detail">
      <a href="#" class="blog-title">The Role design plays in our daily life</a>
    </div>
  </div>
  <div class="blog-col">
    <div class="blog-image" style="background-image: url(images/works-1.jpg);"></div>
    <div class="blog-detail">
      <a href="#" class="blog-title">The Role design plays in our daily life</a>
    </div>
  </div>
  <div class="blog-col">
    <div class="blog-image" style="background-image: url(images/works-1.jpg);"></div>
    <div class="blog-detail">
      <a href="#" class="blog-title">The Role design plays in our daily life</a>
    </div>
  </div>
  <div class="blog-col">
    <div class="blog-image" style="background-image: url(images/works-1.jpg);"></div>
    <div class="blog-detail">
      <a href="#" class="blog-title">The Role design plays in our daily life</a>
    </div>
  </div>
  </div>
 </div>
 </div>

jQuery

  /* V2 Team Carousel */
 if(document.querySelector('#v2-team-carousel')){
 var owl = $('#v2-team-carousel');
 owl.owlCarousel({
    navText: ["<svg xmlns='http://www.w3.org/2000/svg' width='31.135' height='18.057' viewBox='0 0 31.135 18.057'><g id='Group_411' data-name='Group 411' transform='translate(-3 -9.623)'><path id='Path_3205' data-name='Path 3205' d='M31.832,10.479a1.211,1.211,0,0,0-1.714,0l-7.264,7.264a1.211,1.211,0,0,0,0,1.714l7.264,7.264a1.212,1.212,0,0,0,1.714-1.714L25.423,18.6l6.41-6.408a1.211,1.211,0,0,0,0-1.714Z' transform='translate(-18.997)' fill='#fff' stroke='#fff' stroke-width='1' fill-rule='evenodd'/><path id='Path_3206' data-name='Path 3206' d='M32.422,18.086a1.211,1.211,0,0,0-1.211-1.211H4.711a1.211,1.211,0,0,0,0,2.421h26.5A1.211,1.211,0,0,0,32.422,18.086Z' transform='translate(1.213 0.514)' fill='#fff' stroke='#fff' stroke-width='1' fill-rule='evenodd'/></g></svg>","<svg xmlns='http://www.w3.org/2000/svg' width='31.135' height='18.057' viewBox='0 0 31.135 18.057'><g id='Group_412' data-name='Group 412' transform='translate(-3 -9.623)'><path id='Path_3205' data-name='Path 3205' d='M22.854,10.479a1.211,1.211,0,0,1,1.714,0l7.264,7.264a1.211,1.211,0,0,1,0,1.714l-7.264,7.264a1.212,1.212,0,0,1-1.714-1.714L29.263,18.6l-6.41-6.408a1.211,1.211,0,0,1,0-1.714Z' transform='translate(1.447)' fill='#fff' stroke='#fff' stroke-width='1' fill-rule='evenodd'/><path id='Path_3206' data-name='Path 3206' d='M3.5,18.086a1.211,1.211,0,0,1,1.211-1.211h26.5a1.211,1.211,0,1,1,0,2.421H4.711A1.211,1.211,0,0,1,3.5,18.086Z' transform='translate(0 0.514)' fill='#fff' stroke='#fff' stroke-width='1' fill-rule='evenodd'/></g></svg>"],
    margin: 20,
    nav: false,
    dots: false,
    loop: true,
    smartSpeed: 1000,
    responsive: {
        0: {
            items: 1
        },
        576: {
            items: 2
        },
        768: {
            items: 3
        },
        1200: {
            items: 4
        }
    }
});
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY>0) {
        owl.trigger('prev.owl');
    } else {
        owl.trigger('next.owl');
    }
    e.preventDefault();
});
}
/* V2 Blog Carousel */
if(document.querySelector('#v2-blog-carousel')){
var owl = $('#v2-blog-carousel');
owl.owlCarousel({
    navText: ["<svg xmlns='http://www.w3.org/2000/svg' width='31.135' height='18.057' viewBox='0 0 31.135 18.057'><g id='Group_411' data-name='Group 411' transform='translate(-3 -9.623)'><path id='Path_3205' data-name='Path 3205' d='M31.832,10.479a1.211,1.211,0,0,0-1.714,0l-7.264,7.264a1.211,1.211,0,0,0,0,1.714l7.264,7.264a1.212,1.212,0,0,0,1.714-1.714L25.423,18.6l6.41-6.408a1.211,1.211,0,0,0,0-1.714Z' transform='translate(-18.997)' fill='#fff' stroke='#fff' stroke-width='1' fill-rule='evenodd'/><path id='Path_3206' data-name='Path 3206' d='M32.422,18.086a1.211,1.211,0,0,0-1.211-1.211H4.711a1.211,1.211,0,0,0,0,2.421h26.5A1.211,1.211,0,0,0,32.422,18.086Z' transform='translate(1.213 0.514)' fill='#fff' stroke='#fff' stroke-width='1' fill-rule='evenodd'/></g></svg>","<svg xmlns='http://www.w3.org/2000/svg' width='31.135' height='18.057' viewBox='0 0 31.135 18.057'><g id='Group_412' data-name='Group 412' transform='translate(-3 -9.623)'><path id='Path_3205' data-name='Path 3205' d='M22.854,10.479a1.211,1.211,0,0,1,1.714,0l7.264,7.264a1.211,1.211,0,0,1,0,1.714l-7.264,7.264a1.212,1.212,0,0,1-1.714-1.714L29.263,18.6l-6.41-6.408a1.211,1.211,0,0,1,0-1.714Z' transform='translate(1.447)' fill='#fff' stroke='#fff' stroke-width='1' fill-rule='evenodd'/><path id='Path_3206' data-name='Path 3206' d='M3.5,18.086a1.211,1.211,0,0,1,1.211-1.211h26.5a1.211,1.211,0,1,1,0,2.421H4.711A1.211,1.211,0,0,1,3.5,18.086Z' transform='translate(0 0.514)' fill='#fff' stroke='#fff' stroke-width='1' fill-rule='evenodd'/></g></svg>"],
    margin: 20,
    nav: false,
    dots: false,
    loop: true,
    smartSpeed: 1000,
    responsive: {
        0: {
            items: 1
        },
        576: {
            items: 1
        },
        768: {
            items: 2
        },
        1200: {
            items: 3
        }
    }
});
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY>0) {
        owl.trigger('prev.owl');
    } else {
        owl.trigger('next.owl');
    }
    e.preventDefault();
});
}

这里是Pen

【问题讨论】：

我想这可能是由于 owl 变量的重用/双重声明。
我知道，但是我如何使用mousewheel 多个Owl ！~
我找到了解决方案。感谢您的评论。

标签： jquery owl-carousel

【解决方案1】：

基本上我们使用多个猫头鹰和不同的猫头鹰引用和 CSS ID 所以我们需要在 MouseWheel 上移动 Current 方法。

owl.on('mousewheel', '.owl-stage', function (e) {
    var current = $(this); // Just Put for on which you MouseWheel used
    if (e.deltaY>0) {
        currenttrigger('prev.owl');
    } else {
        current.trigger('next.owl');
    }
    e.preventDefault();
});

【讨论】：