如何快速设置猫头鹰传送带的宽度？

Question

是否有一种方法可以根据.owlCarousel({ responsive:{的宽度指定.right？

我通过jQuery UI Resizable实现.left的可变宽度。

所以我想根据.right的宽度更改滑动元素的数量。

示例：https://jsfiddle.net/3mt7ykcs/

HTML：

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="flex">
  <div class="left">
    <p>.left is variable width by jQuery UI Resizable</p>
  </div>
  <div class="right">
    <p>I want to determine the number of slider elements according to the range of .right</p>
    <div id="owl-example" class="owl-carousel">
    </div>
  </div>  
</div>

CSS：

.flex {
    display: flex;
}
.right, .left {
    width: 50%;
    background: orange;
    margin: 10px;
    position: relative;
}

JS：

$(document).ready(function() {

    var img = '<div><img src="https://placehold.jp/150x150.png"></div>';
    for (var i = 0;  i < 10;  i++) {
        $("#owl-example").append(img);
    }

    $("#owl-example").owlCarousel({
        loop   : false,
        margin : 10,
        nav    : false,
        dots   : false,
        responsive  :{ // I want to determine the number of slider elements according to the range of .right
            0:{
                items:1
            },
            350:{
                items:2
            },        
            600:{
                items:5
            },
        }
    }); 

});

Answer 1

使用responsiveBaseElement