Javascript 如何在owl转盘中响应地设置宽度？

是否有一种方法可以根据

的宽度指定
.owlCarousel（{responsive:{
。right

我通过jQuery UI Resizeable为

.left

实现了可变宽度

因此，我想根据

的宽度更改滑动元素的数量。right

样本：

HTML:

JS:

$（文档）.ready（函数（）{
var img=“”；
对于（变量i=0；i<10；i++）{
$（“#owl示例”）.append（img）；
}
$（“#猫头鹰示例”）.owlCarousel({
循环：false，
差额：10，
导航：错，
点：错，
响应：{//我想根据.right的范围确定滑块元素的数量
0:{
项目：1
},
350:{
项目：2
},        
600:{
项目：5
},
}
}); 
});

使用

---

演示：

Obrigado！DomoArigato！@thesumliveshiere bem vinda

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

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

$(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
            },
        }
    }); 

});

 $("#owl-example").owlCarousel({
      loop   : false,
      margin : 10,
      nav    : false,
      dots   : false,
      responsiveBaseElement:$(".right")[0],
      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
        },
      }
    });