如何解决我们如何为多个猫头鹰旋转木马添加鼠标滚轮?
我的项目涉及使用 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();
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。