jquery 我们如何添加鼠标轮与多猫头鹰旋转木马？

ttp71kqs  于 2023-04-11  发布在  jQuery
关注(0)|答案(1)|浏览(124)

我的项目涉及创建一个团队和博客等。.与Owl Carousel .我使用Owl Carousel .
我使用两次Owl Carousel在一个页面，所以我试图移动与mousewheel，但它与最后猫头鹰滑块，但不是其他工作。

超文本标记语言

<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

jquery

1条答案

按热度按时间
6tr1vspr

6tr1vspr1#

基本上，我们使用多个猫头鹰与不同的猫头鹰参考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();
});
赞(0）分享  回复(0）举报  2023-04-11
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com