Карусель совы переходит на определенный индекс после вызова ajax - PullRequest
Новая
       11

Карусель совы переходит на определенный индекс после вызова ajax

1 голос
/ 25 мая 2019

Я использую Сова Карусель 2 . У меня есть несколько кнопок на моей странице. При нажатии на одну из этих кнопок будет AJAX-вызов. Из этого вызова AJAX приходит идентификатор изображения. Я сравниваю этот идентификатор изображения с идентификатором в карусели сов и затем хочу перейти к соответствующему слайду.

Однако, что бы я ни пытался, индексное число возвращает 0. Так что сова всегда прыгает на самое первое изображение. Я попробовал несколько вещей, но я просто не могу заставить его работать.

Мой список с кнопками 

<div class="spo-list">
  <div class="spo-item" data-image="47059110">Dunkelrot</div>
  <div class="spo-item" data-image="47059111">Rot</div>
</div>

Мой слайдер 

<div class="thumbnail-slider-container"> 
  <div id="thumbnailSlider" class="thumbnail-slider owl-carousel"> 
    <div data-imageid="47059110"><img src="image" /></div>
    <div data-imageid="47059111"><img src="image" /></div>
  </div> 
</div>

Код 

$('.spo-item').on('click', function(){
  var img = $(this).data('image')
  var url = link-to-page
  $.ajax({
    url: url,
    success:function(data) {
      var next_id = data.image_id // the ID that comes from the call like '47059110' 
      var next_slide = var next_slide = $('#thumbnailSlider').find('div[data-imageid="'+next_id+'"]').closest('.owl-item').index()
      console.log(next_slide)
      $('#thumbnailSlider').trigger('to.owl.carousel', [next_slide, 300, true]); 
      // this jumps to first image since "next_slide" always is 0
    }
  });
});

Я просто не вижу, что не так с получением индекса. Я использовал этот вопрос в качестве ссылки.

У кого-нибудь есть идея? Заранее спасибо

1 Ответ

0 голосов
/ 25 мая 2019

Хорошо, я нашел ответ на проблему! Проблема была в том, что я пытался получить индекс не того элемента. Сова карусель оборачивает каждый элемент в div под названием owl-item. Поэтому, когда вы пытаетесь получить индексный номер элемента, он всегда будет иметь индекс 0, поскольку в обернутом элементе есть только один элемент. Фактический HTML выглядит так: 

<div class="thumbnail-slider-container"> 
  <div id="thumbnailSlider" class="thumbnail-slider owl-carousel"> 
    <div class="owl-item"><div data-imageid="47059110"><img src="image" /></div></div>
    <div class="owl-item"><div data-imageid="47059111"><img src="image" /></div></div>
  </div> 
</div>

Таким образом, чтобы получить правильный индекс, вам нужно использовать: 

var next_slide = $('#thumbnailSlider').find('div[data-imageid="'+next_id+'"]').closest('.owl-item').index()
...