我们如何为多个猫头鹰旋转木马添加鼠标滚轮？

编程问答 2022-05-16

问题描述

我的项目涉及使用 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-1.714,0l-7.264,7.264a1.211,1.714l7.264,7.264a1.212,1.212,1.714-1.714L25.423,18.6l6.41-6.408a1.211,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,0-1.211-1.211H4.711a1.211,2.421h26.5A1.211,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,1,1.714,0l7.264,1.714l-7.264,1-1.714-1.714L29.263,18.6l-6.41-6.408a1.211,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,1.211-1.211h26.5a1.211,2.421H4.711A1.211,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,576: {
            items: 1
        },768: {
            items: 2
        },1200: {
            items: 3
        }
    }
});
owl.on('mousewheel',function (e) {
    if (e.deltaY>0) {
        owl.trigger('prev.owl');
    } else {
        owl.trigger('next.owl');
    }
    e.preventDefault();
});
}

这里是Pen

解决方法

基本上我们使用多个猫头鹰和不同的猫头鹰参考和 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();
});
jqueryowl-carousel