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 */
            });

        });

但是当我拖动轮播内部（product-image-slider）时，父轮播也会拖动。我尝试禁用或阻止父轮播，但无法正常工作。喜欢

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事件您可以使用猫头鹰轮播的mousedown核心事件。

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

（如果您的轮播可以触摸，您也可以像在示例中一样添加touchstart事件）

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

嵌套猫头鹰轮播2无法正常工作

1 个答案: