时间戳

首页 > 解决方案 > 嵌套猫头鹰旋转木马 2 不工作

jquery - 嵌套猫头鹰旋转木马 2 不工作

问题描述

我有 2 个 owl carousel 嵌套，就像
这是 html 结构 

    <li class="product">
        <ul class="product-image-slider owl-carousel">
            <li>image 1</li>
            <li>image 1</li>
        </ul>
        content here..
    </li>
    <li class="product">
        <ul>
            <li>1</li>
            <li>1</li>
        </ul>
        content here..
    </li>
    <li class="product">
        <ul>
            <li>1</li>
            <li>1</li>
        </ul>
        content here..
    </li>  
</ul>

这是js脚本

$(document).ready(function() {
            var outerCarousel = $('.product-lists.owl-carousel');
            outerCarousel.owlCarousel({
                loop: true,
                center: true,
                items: 1,
                nav: false,
                dots: false
            });

            var innerCarousel = $('.product-image-slider.owl-carousel');
            innerCarousel.owlCarousel({
                loop: true,
                center: true,
                items: 1,
                nav: false,
                dots: false,
                /* mouseDrag: false,
                touchDrag: false,
                pullDrag: false */
            });

        });

但是当我拖动轮播内部（产品图像滑块）时，父轮播也会拖动。我尝试禁用或阻止父轮播但不工作。喜欢

innerCarousel.on('drag.owl.carousel', function(event) {
        outerCarousel.data('owl.carousel').settings.touchDrag = false;
        outerCarousel.data('owl.carousel').settings.mouseDrag = false;
    });
    innerCarousel.on('dragged.owl.carousel', function(event) {
        outerCarousel.data('owl.carousel').settings.touchDrag = true;
        outerCarousel.data('owl.carousel').settings.mouseDrag = true;
    });

我该怎么做谢谢

标签： jqueryowl-carouselowl-carousel-2

解决方案

你可以试试这个

https://jsfiddle.net/ugrw2vjq/19/

使用drag.owl.carouse和dragged.owl.carousel事件的 insted 可以使用 owl carousel 的 mousedown 核心事件。

要实现您想要的，您必须停止此事件从内部轮播到外部轮播的传播，因此 mousedown 事件将在内部轮播上触发，但不会传播到 id 后面的元素。

（如果您的轮播应该与触摸一起使用，您也可以像我在示例中所做的那样添加 touchstart 事件）

你需要你的轮播在循环吗？当您将内部轮播放在第一张幻灯片中并且该幻灯片在循环时被克隆时，当您将主轮播从第一个元素向后拖动时会导致您出现问题

推荐阅读