嵌套貓頭鷹輪播2無法正常工作

Question

我有2個貓頭鷹輪播嵌套， 像
這是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事件，可以使用owl carousel的mousedown核心事件。

要實現所需的功能，必須停止將此事件從內部輪播傳播到外部輪播，因此mousedown事件將在內部輪播上觸發，但不會傳播到id后面的元素。

（如果您的輪播可以與touch一起使用，您也可以像在示例中一樣添加touchstart事件）

您是否需要輪播處於循環中？ 當您將內部旋轉木馬放在第一張幻燈片中時，該幻燈片在循環中處於克隆狀態，這會在您將主旋轉木馬從第一個元素向后拖動時引起問題