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

Question

我有 2 个嵌套的猫头鹰旋转木马 like
这是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;
    });

我该怎么做谢谢

Answer 1

你可以试试这个

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

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

要达到你想要的效果，你必须停止这个事件从内部轮播到外部轮播的传播，所以 mousedown 事件将在内部轮播上触发，但不会传播到 id 后面的元素。

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

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