javascript - 如何使用鼠标滚轮和带有自定义导航的 MAC 触控板滑动 owl carousel 滑块和光滑滑块?
问题描述
我正在使用 OwlCarousel 2 作为滑块(https://owlcarousel2.github.io/OwlCarousel2/)。到目前为止,我有三个滑块。我的问题是,我创建了自定义导航(它显示在图像下方),我必须使用鼠标滚轮滑动图像。所以它可以在 Windows 上运行,但不能在 MAC 书上运行。
我从这里尝试过https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html
你能帮我解决这个问题吗?
我也尝试了下面的代码,但仍然没有触发。
var action = false,
clicked = false;
var Owl = {
init: function() {
Owl.carousel();
},
carousel: function() {
var owl;
$(document).ready(function() {
owl = $('.owl-carousel').owlCarousel({
items: 1,
center: true,
nav: false,
dots: true,
loop: true,
margin: 10,
animateOut: 'slideOutUp',
animateIn: 'slideInUp',
dotsContainer: '.test',
// navText: ['prev','next'],
});
$('.homeDots').on('click', 'li', function(e) {
owl.trigger('to.owl.carousel', [$(this).index(), 300]);
});
$('.homeDots').on('mousewheel', 'li', function(e) {
//$('.homeDots').trigger('to.owl.carousel', [$(this).index(), 300]);
if (e.deltaY > 0) {
$('.owl-carousel').trigger('to.owl.carousel', [$(this).index(), 300]);
} else {
$('.owl-carousel').trigger('to.owl.carousel', [$(this).index(), 300]);
}
e.preventDefault();
});
});
}
};
var owl = $('.owl-carousel');
owl.on('changed.owl.carousel', function(event) {
var item = event.item.index - 2; // Position of the current item
$('h2').removeClass('animated bounce');
$('.owl-item').not('.cloned').eq(item).find('h2').addClass('animated bounce');
});
$(document).ready(function() {
Owl.init();
});
body {
margin: 0;
padding: 0;
height: 100%;
}
h2 {
margin: 0;
padding: 0;
}
.sliderText {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10%;
color: #fff;
}
.banner-bg {
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
}
.slider1 {
background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg');
}
.slider2 {
background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('https://www.annmarieackermann.com/wp-content/uploads/2016/08/sea-1514249_1280-Pixabay.jpg');
}
.slider3 {
background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg');
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="banner-bg slider1">
<div class="sliderText">
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Curabitur iaculis elit vitae ipsum vestibulum, sed vestibulum est venenatis. Sed aliquet lacus nec bibendum maximus.</h3>
</div>
</div>
</div>
<div class="item">
<div class="banner-bg slider2">
<div class="sliderText">
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Curabitur iaculis elit vitae ipsum vestibulum, sed vestibulum est venenatis. Sed aliquet lacus nec bibendum maximus.</h3>
</div>
</div>
</div>
<div class="item">
<div class="banner-bg slider3">
<div class="sliderText">
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Curabitur iaculis elit vitae ipsum vestibulum, sed vestibulum est venenatis. Sed aliquet lacus nec bibendum maximus.</h3>
</div>
</div>
</div>
</div>
<div class="homeDots">
<ul class="test text-right">
<li class="homeDots1 active" data="0">About Us</li>
<li class="homeDots2" data="1">Our Products</li>
<li class="homeDots3" data="2">Our Services</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
这是一个光滑的滑块(https://kenwheeler.github.io/slick/)。我在 MAC 书中尝试了以下代码,但它无法正常工作。我在第一个滑块上,然后滚动屏幕上显示的第二个图像。现在我再次滚动然后它卡住了。我连续滚动超过 10 次,然后第三张幻灯片出现并卡住了。
$(document).on('ready', function() {
var slider = $(".slider");
var scrollCount = null;
var scroll = null;
slider
.slick({
dots: true,
vertical: true,
dots: false,
prevArrow: false,
nextArrow: false,
//autoplay: true,
//autoplaySpeed: 5000,
});
$('.homeDots').on('click', 'li', function(e) {
//owl.trigger('to.owl.carousel', [$(this).index(), 300]);
slider.slick('slickNext');
});
slider.on('wheel', (function(e) {
e.preventDefault();
clearTimeout(scroll);
scroll = setTimeout(function() {
scrollCount = 0;
}, 200);
if (scrollCount) return 0;
scrollCount = 1;
if (e.originalEvent.deltaY < 0) {
$(this).slick('slickNext');
} else {
$(this).slick('slickPrev');
}
}));
});
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.slick-slider {
height: 100%;
}
.slick-vertical .slick-slide {
border: none;
}
.slider {
width: 100%;
}
/*.slick-slide {
margin: 0px 20px;
}*/
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.a-slide {
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
.slider div {
height: 100% !important;
/* added this */
width: 100% !important;
}
.slider1 {
background-image: url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg');
}
.slider2 {
background-image: url('https://www.annmarieackermann.com/wp-content/uploads/2016/08/sea-1514249_1280-Pixabay.jpg');
}
.slider3 {
background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg');
}
.slider4 {
background-image: url('https://timesofindia.indiatimes.com/thumb/msid-66476517,imgsize-196276,width-800,height-600,resizemode-4/66476517.jpg');
}
.slider5 {
background-image: url('https://media.cntraveller.in/wp-content/uploads/2018/10/GettyImages-990972132-866x487.jpg');
}
.homeDots {
position: absolute;
top: 50%;
right: 05%;
z-index: 10;
transform: translateY(-50%);
color: #ccc;
padding-bottom: 20px;
}
.homeDots ul li {
padding-bottom: 15px;
}
.homeDots ul {
list-style: none;
}
.homeDots ul li.active {
font-weight: 700;
}
.homeDots ul li span {
position: relative;
}
.homeDots ul li span:after {
content: "";
width: 20px;
height: 2px;
background-color: #fff;
display: block;
position: absolute;
right: -30px;
top: 10px;
}
.homeDots ul li.active span:after {
background-color: #ccc;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<div class="slider">
<div class="a-slide slider1"></div>
<div class="a-slide slider2"></div>
<div class="a-slide slider3"></div>
<div class="a-slide slider4"></div>
<div class="a-slide slider5"></div>
</div>
<div class="homeDots">
<ul class="test text-right">
<li class="homeDots1 active" data="0">About Us</li>
<li class="homeDots2" data="1">Our Products</li>
<li class="homeDots3" data="2">Our Services</li>
<li class="homeDots4" data="3"><span>Careers</span></li>
<li class="homeDots5" data="4"><span>Cotnact Us</span></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js" type="text/javascript" charset="utf-8"></script>
解决方案
这是鼠标滚轮上 Slick 滑块的工作代码。您可以为 Owl Carousel 应用相同的登录名。
$(document).ready( function($) {
var slider = $('.slider')
slider.slick({
dots: true,
vertical: true,
dots: false,
prevArrow: false,
nextArrow: false,
asNavFor: '.homeDots .test',
});
slider.on('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
jQuery(this).slick('slickPrev');
}
else{
jQuery(this).slick('slickNext');
}
});
$('.homeDots .test').slick({
slidesToShow: 5,
slidesToScroll: 5,
dots: true,
vertical: true,
adaptiveHeight: true,
dots: false,
prevArrow: false,
nextArrow: false,
asNavFor: '.slider',
centerMode: true,
focusOnSelect: true
});
});
*, *:after, *:before{
box-sizing: border-box;
}
body {
font-family: 'Open Sans', serif;
background-color: #fff;
padding: 100px;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.slick-slider {
height: 100%;
}
.slick-vertical .slick-slide {
border: none;
}
.slider {
width: 100%;
}
/*.slick-slide {
margin: 0px 20px;
}*/
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.a-slide {
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
.slider div {
height: 100% !important;
/* added this */
width: 100% !important;
}
.slider1 {
background-image: url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg');
}
.slider2 {
background-image: url('https://www.annmarieackermann.com/wp-content/uploads/2016/08/sea-1514249_1280-Pixabay.jpg');
}
.slider3 {
background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg');
}
.slider4 {
background-image: url('https://timesofindia.indiatimes.com/thumb/msid-66476517,imgsize-196276,width-800,height-600,resizemode-4/66476517.jpg');
}
.slider5 {
background-image: url('https://media.cntraveller.in/wp-content/uploads/2018/10/GettyImages-990972132-866x487.jpg');
}
.homeDots {
position: absolute;
top: 50%;
right: 05%;
z-index: 10;
transform: translateY(-50%);
color: #ccc;
width: 100%;
max-width: 200px;
padding-bottom: 20px;
}
/*.homeDots ul li {
padding-bottom: 15px;
}*/
.homeDots ul {
list-style: none;
}
.homeDots ul li.active {
font-weight: 700;
}
.homeDots ul li span {
position: relative;
}
.homeDots ul li span:after {
content: "";
width: 20px;
height: 2px;
background-color: #fff;
display: block;
position: absolute;
right: -30px;
top: 10px;
}
.homeDots ul li.active span:after {
background-color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider">
<div class="a-slide slider1"></div>
<div class="a-slide slider2"></div>
<div class="a-slide slider3"></div>
<div class="a-slide slider4"></div>
<div class="a-slide slider5"></div>
</div>
<div class="homeDots">
<ul class="test text-right">
<li class="homeDots1 active" data="0">About Us</li>
<li class="homeDots2" data="1">Our Products</li>
<li class="homeDots3" data="2">Our Services</li>
<li class="homeDots4" data="3"><span>Careers</span></li>
<li class="homeDots5" data="4"><span>Cotnact Us</span></li>
</ul>
</div>
推荐阅读
- rsync - 来自指定服务器目录的 Rsync 特定列出的文件
- if-statement - 在 Power BI 中将时间格式更改为 30 分钟间隔
- c - 关于 pwd.c 文件的 SIGSEGV 分段错误?
- javascript - 如何将滚动添加到 div?
- r - 如何使用 R 编程语言在 geom_line() 中(自动)更改颜色
- sqlite - 通过命令行合并多个 Raster MBTiles(Sqlite 文件)
- ruby - 使用 ruby-install 在 Mac OSX Catalina 上安装 Ruby 2.2
- vue.js - 使用 XML2JS 从 Nuxt 中的 API 解析 XML
- bash - 如何将我的 USB 网络摄像头录制为 mp4 格式?
- postgresql-9.5 - 在几分钟内未显示正确的增量