Почему owl не видит itemы в функции?

127

29 августа 2019, 10:40

Добрый день есть такой код

var storiesItems = $('.stories-items');
  storiesItems.owlCarousel({
    items: 1,
    dots: false,
    nav: true,
    onInitialize: callback
  })
  function callback(event){
    var items  = event;
    console.log(items)

Вывод в консоле 0. При том что слайдер работает именно отсюда и у него 4 элемента

Answer 1

Этот код выводит корневой элемент карусели. Чтобы можно было узнать число элементов, нужно поискать внутри. Предлагаю такое решение:

var storiesItems = $('.stories-items'); 
 
  storiesItems.owlCarousel({ 
    items: 1, 
    dots: false, 
    nav: true, 
    onInitialize: callback 
  }) 
 
  function callback(event){ 
    var items  = event.target; 
    console.log($(items).find('.item').length) 
   }

body { 
  padding: 20px; 
  font-family: Helvetica; 
} 
 
.stories-items .item { 
  height: 100px; 
  box-shadow: 0 0 10px 10px rgba(0,0,0,.1); 
  text-align: center; 
  border-radius: 4px; 
  margin: 0 50px; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
 
.owl-stage { 
  display: flex; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> 
 
<div class="stories-items"> 
  <div class="item"> 
    <div>item</div> 
  </div> 
  <div class="item"> 
    <div>item</div> 
  </div> 
  <div class="item"> 
    <div>item</div> 
  </div> 
  <div class="item"> 
    <div>item</div> 
  </div> 
</div>