我有一个网站,其中猫头鹰轮播用于滚动卡片。
http://example.develop-web.site/process/
当我使用鼠标滚动浏览卡片时,它将一张一张地滚动卡片。但是,如果我在带触摸板的Macbook上尝试,它会立即滚动到最新项目。
我已使用此示例来实现此效果: https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html
它正在使用jquery.mousewheel.js
这是代码查找布局的方式:
<div class="vertical-slider owl-carousel" id="process-vertical-slider">
<?php while( have_rows('process_slider_items') ): the_row();
$image = get_sub_field('image');
$title = get_sub_field('title');
$description = get_sub_field('description');
?>
<div class="item" data-count="<?php echo $count; ?>">
<div class="process-slider-item">
<div class="process-slider-item__image">
<img src="<?php echo $image['sizes']['image470x280']; ?>" alt="<?php echo $image['alt']; ?>">
</div>
<h3 class="process-slider-item__title"><?php echo $title; ?></h3>
<p class="process-slider-item__description"><?php echo $description; ?></p>
<div class="mask"></div>
</div>
</div>
<?php $count++; endwhile; ?>
</div>
这是滑块的初始化
/* Vertical Slider Process */
$('#process-vertical-slider').owlCarousel({
items: 1,
loop: false,
mouseDrag: true,
touchDrag: false,
pullDrag: false,
rewind: false,
autoplay: false,
margin: 0,
nav: false,
smartSpeed: 1500,
dots: true,
dotsContainer: '#process-dots'
});
$('#process-dots .owl-dot').click(function () {
$('#process-vertical-slider').trigger('to.owl.carousel', [$(this).index(), 300]);
});
我希望它可以与触摸板一样使用鼠标滚动。