Owl carousel with mouse wheel 滚动插件速度
Owl carousel with mouse wheel scroll plugin speed
我在 Mouse Wheel
插件中使用 Owl Carousel 2
,因为该网站显示了如何实现它:
https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html
这是我的例子:https://z-testing.000webhostapp.com/_owlcarousel/
这是我的代码:
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
我遇到的问题是滚动不流畅,速度非常快,一次滚动 6-10 张幻灯片,但无法使用。
我希望它尽可能像鼠标滚轮滚动一样平滑。
我找到了一个集成了鼠标滚轮插件的灯箱插件,并检查了他们是如何做到的,但我不知道如何在我的代码中使用它,你能帮我吗?
这是插件:http://fancybox.net
您可以查看 Image gallery (ps, try using mouse scroll wheel)
弹出画廊示例。
如果你下载这个插件,你可以看到他们是这样实现鼠标滚轮插件的:
if ($.fn.mousewheel) {
wrap.bind('mousewheel.fb', function(e, delta) {
if (busy) {
e.preventDefault();
} else if ($(e.target).get(0).clientHeight == 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) {
e.preventDefault();
$.fancybox[ delta > 0 ? 'prev' : 'next']();
}
});
}
你能帮我让它与 Owl Carousel 一起正常工作吗?
您需要使用smartSpeed函数来设置滚动速度。
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
var owl = $('.owl-carousel');
$('.owl-carousel').owlCarousel({
loop:true,
margin:0,
nav:true,
smartSpeed:1000,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
$(document,window,'html').mouseleave(function(){
$("#footer").fadeOut();
}).mouseenter(function(){
$("#footer").fadeIn();
});
$(function(){
$("#header").load("includes/header.html");
$("#footer").load("includes/footer.html");
});
body { padding-top: 0px;}
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/normalize.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/owl.carousel.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/owl.theme.default.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/bootstrap.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/main.css">
<header id="header"></header>
<div class="owl-carousel owl-theme">
<div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-3-ux.png)"></div>
<div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-4-editorial.png)"></div>
<div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-5-senaletica.png)"></div>
</div>
<footer id="footer"></footer>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/vendor/modernizr-3.11.2.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery-3.5.1.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/bootstrap.bundle.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery.justifiedGallery.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/owl.carousel.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery.mousewheel.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/main.js"></script>
我在 Mouse Wheel
插件中使用 Owl Carousel 2
,因为该网站显示了如何实现它:
https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html
这是我的例子:https://z-testing.000webhostapp.com/_owlcarousel/
这是我的代码:
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
我遇到的问题是滚动不流畅,速度非常快,一次滚动 6-10 张幻灯片,但无法使用。 我希望它尽可能像鼠标滚轮滚动一样平滑。
我找到了一个集成了鼠标滚轮插件的灯箱插件,并检查了他们是如何做到的,但我不知道如何在我的代码中使用它,你能帮我吗?
这是插件:http://fancybox.net
您可以查看 Image gallery (ps, try using mouse scroll wheel)
弹出画廊示例。
如果你下载这个插件,你可以看到他们是这样实现鼠标滚轮插件的:
if ($.fn.mousewheel) {
wrap.bind('mousewheel.fb', function(e, delta) {
if (busy) {
e.preventDefault();
} else if ($(e.target).get(0).clientHeight == 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) {
e.preventDefault();
$.fancybox[ delta > 0 ? 'prev' : 'next']();
}
});
}
你能帮我让它与 Owl Carousel 一起正常工作吗?
您需要使用smartSpeed函数来设置滚动速度。
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
var owl = $('.owl-carousel');
$('.owl-carousel').owlCarousel({
loop:true,
margin:0,
nav:true,
smartSpeed:1000,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
$(document,window,'html').mouseleave(function(){
$("#footer").fadeOut();
}).mouseenter(function(){
$("#footer").fadeIn();
});
$(function(){
$("#header").load("includes/header.html");
$("#footer").load("includes/footer.html");
});
body { padding-top: 0px;}
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/normalize.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/owl.carousel.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/owl.theme.default.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/bootstrap.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/main.css">
<header id="header"></header>
<div class="owl-carousel owl-theme">
<div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-3-ux.png)"></div>
<div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-4-editorial.png)"></div>
<div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-5-senaletica.png)"></div>
</div>
<footer id="footer"></footer>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/vendor/modernizr-3.11.2.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery-3.5.1.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/bootstrap.bundle.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery.justifiedGallery.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/owl.carousel.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery.mousewheel.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/main.js"></script>