Question

我正在尝试同步猫头鹰轮播插件中的两个轮播，但是失败。这是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Slider</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
</head>

<style>
    body {
        direction: rtl;
    }

    .card {
        background-color: #f1f1f1;
    }

    #sync1 .item {
        background: #0c83e7;
        padding: 80px 0px;
        margin: 5px;
        color: #FFF;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-align: center;
    }

    #sync2 .item {
        background: #C9C9C9;
        padding: 10px 0px;
        margin: 5px;
        color: #FFF;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-align: center;
        cursor: pointer;
    }

    #sync2 .item h1 {
        font-size: 18px;
    }

    #sync2 .synced .item {
        background: #0c83e7;
    }
</style>

<body>


    <div class="container-fluid">
        <div class="card p-4 mt-5">
            <div class="row">
                <div class="col-lg-12">
                    <div id="sync1" class="owl-carousel">
                        <div class="item">
                            <h1>1</h1>
                        </div>
                        <div class="item">
                            <h1>2</h1>
                        </div>
                        <div class="item">
                            <h1>3</h1>
                        </div>
                        <div class="item">
                            <h1>4</h1>
                        </div>
                        <div class="item">
                            <h1>5</h1>
                        </div>
                        <div class="item">
                            <h1>6</h1>
                        </div>
                        <div class="item">
                            <h1>7</h1>
                        </div>
                        <div class="item">
                            <h1>8</h1>
                        </div>
                        <div class="item">
                            <h1>9</h1>
                        </div>
                        <div class="item">
                            <h1>10</h1>
                        </div>
                    </div>
                    <div id="sync2" class="owl-carousel">
                        <div class="item">
                            <h1>1</h1>
                        </div>
                        <div class="item">
                            <h1>2</h1>
                        </div>
                        <div class="item">
                            <h1>3</h1>
                        </div>
                        <div class="item">
                            <h1>4</h1>
                        </div>
                        <div class="item">
                            <h1>5</h1>
                        </div>
                        <div class="item">
                            <h1>6</h1>
                        </div>
                        <div class="item">
                            <h1>7</h1>
                        </div>
                        <div class="item">
                            <h1>8</h1>
                        </div>
                        <div class="item">
                            <h1>9</h1>
                        </div>
                        <div class="item">
                            <h1>10</h1>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8"></div>
            </div>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

    <script>
        $(document).ready(function () {

            var sync1 = $("#sync1");
            var sync2 = $("#sync2");

            sync1.owlCarousel({
                items: 1,
                slideSpeed: 1000,
                navigation: true,
                pagination: false,
                afterAction: syncPosition,
                responsiveRefreshRate: 200,
                rtl: true
            });

            sync2.owlCarousel({
                rtl: true,
                items: 6,
                itemsDesktop: [1199, 10],
                itemsDesktopSmall: [979, 10],
                itemsTablet: [768, 8],
                itemsMobile: [479, 4],
                pagination: false,
                responsiveRefreshRate: 100,
                afterInit: function (el) {
                    el.find(".owl-item").eq(0).addClass("synced");
                }
            });

            function syncPosition(el) {
                var current = this.currentItem;
                $("#sync2")
                    .find(".owl-item")
                    .removeClass("synced")
                    .eq(current)
                    .addClass("synced")
                if ($("#sync2").data("owlCarousel") !== undefined) {
                    center(current)
                }
            }

            $("#sync2").on("click", ".owl-item", function (e) {
                e.preventDefault();
                var number = $(this).data("owlItem");
                sync1.trigger("owl.goTo", number);
            });

            function center(number) {
                var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
                var num = number;
                var found = false;
                for (var i in sync2visible) {
                    if (num === sync2visible[i]) {
                        var found = true;
                    }
                }

                if (found === false) {
                    if (num > sync2visible[sync2visible.length - 1]) {
                        sync2.trigger("owl.goTo", num - sync2visible.length + 2)
                    } else {
                        if (num - 1 === -1) {
                            num = 0;
                        }
                        sync2.trigger("owl.goTo", num);
                    }
                } else if (num === sync2visible[sync2visible.length - 1]) {
                    sync2.trigger("owl.goTo", sync2visible[1])
                } else if (num === sync2visible[0]) {
                    sync2.trigger("owl.goTo", num - 1)
                }
            }
        });
    </script>

</body>

</html>

仅与两个轮播同步无法正常工作。

同步两个猫头鹰轮播

0 个答案: