用户使用Macbook触摸板时,Owl Carousel滚动到最新元素

时间:2019-07-16 19:33:08

标签: javascript jquery owl-carousel

我有一个网站,其中猫头鹰轮播用于滚动卡片。

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]);
    });

我希望它可以与触摸板一样使用鼠标滚动。

0 个答案:

没有答案