Javascript 控制两个滑块'；owlcarousel中具有相同按钮/控制器的组件？

我有两个猫头鹰转盘。一个在另一个之上。一个是包含某些内容的图像，另一个是仅包含内容的图像。两个滑块需要一起更改

这是下面内容滑块的代码

                        <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>

01
02
03
04

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

<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>

$（文档）.ready（函数（）{
var owl=$（“#owkey bg滑块，#owkey内容滑块”）；
猫头鹰旋转木马({
导航：对，
导航文本：[“”，“”]，
单项：对，
过渡风格：“褪色”，
自动播放：对，
触摸拖动：错误，
mouseDrag：错
});
})

我认为有经验的猫头鹰转盘用户可以在这方面帮助我

这里有解决这个问题的方法，它适用于任何其他类型的滑块，但不适用于owl转盘

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