嵌套 owl 轮播 2 不工作

Question

我有 2 个 owl 嵌套轮播 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 轮播的 mousedown 核心事件。

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

（如果您的旋转木马应该与触摸一起工作，您也可以像我在示例中所做的那样添加 touchstart 事件）

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

嵌套 owl 轮播 2 不工作

nested owl carousel 2 not working

jquery

owl-carousel

owl-carousel-2