在 owlcarousel 中使用相同的按钮/控制器控制两个滑块的组件？答案

【问题标题】：Controlling two slider's components with same buttons/controllers in owlcarousel?在 owlcarousel 中使用相同的按钮/控制器控制两个滑块的组件？
【发布时间】：2017-01-31 05:07:06
【问题描述】：

我有两个猫头鹰旋转木马。一个在另一个之上。一种是带有一些内容的图像，另一种是仅内容。并且两个滑块需要一起改变。

这是下面的内容滑块代码

                        <div id="owkey-content-slider" class="owl-carousel">
                        <div class="item">

                            <div class="slider-content">
                                <h4>WE CREATE</h4>
                            </div>
                        </div>
                        <div class="item">
                            <div class="slider-content">
                                <h4>WE BUILD</h4>
                            </div>
                        </div>
                        <div class="item">
                            <div class="slider-content">
                                <h4>WE OFFER</h4>
                            </div>                       
                        </div>
                        <div class="item">
                            <div class="slider-content">
                                <h4>WE DELIVER</h4>
                            </div>
                        </div>
                    </div>

这是图片滑块的代码

        <div class="header-bg-image-slide">
        <div id="owkey-bg-slider" class="owl-carousel">
            <div class="item">
                <img src="img/owkey-slider-2.jpg">
                <div class="number-item">01</div>
            </div>
            <div class="item">
                <img src="img/owkey-slider.jpg">
                <div class="number-item">02</div>

            </div>
            <div class="item">
                <img src="img/shutterstock_327808505.jpg">
                <div class="number-item">03</div>                       
            </div>
            <div class="item">

                <img src="img/owkey-head.png">
                <div class="number-item">04</div>
            </div>
        </div>

并且它们在相同的条件/参数中初始化。他们正在一起改变。但是，当单击按钮时，这些按钮用于图像滑块，并且肯定不会改变其他滑块的内容。

<script type="text/javascript">
    $(document).ready(function() {
        var owl = $("#owkey-bg-slider, #owkey-content-slider");
        owl.owlCarousel({
            navigation : true,
            navigationText: ["<i class=\"fa fa-angle-up\">","<i class=\"fa fa-angle-down\">"],
            singleItem : true,
            transitionStyle : "fade",
            autoPlay: true,
            touchDrag: false,
            mouseDrag: false
        });
    })
</script>

我认为有经验的猫头鹰轮播用户可以在这方面为我提供帮助。

这里有解决此问题的方法，适用于任何其他类型的滑块，但不适用于猫头鹰轮播。

【问题讨论】：

标签： javascript html css slider owl-carousel

【解决方案1】：

使用Flickity Slider，它是一个更好的滑块插件。

【讨论】：