Как правильно настроить ширину в сове-карусели? - PullRequest
Новая
       12

Как правильно настроить ширину в сове-карусели?

0 голосов
/ 28 января 2020

Есть ли способ указать .owlCarousel({ responsive:{ в соответствии с шириной .right?

Я реализую переменную ширину для .left с помощью jQuery UI Resizable.

Так что я хотите изменить количество скользящих элементов в соответствии с шириной .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
            },
        }
    }); 

});

1 Ответ

0 голосов
/ 28 января 2020

Использование respiveBaseElement 

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

Демо: https://jsfiddle.net/lotusgodkk/7xotrg56/2/

...