Owl 轮播在 ajax 调用后跳转到特定索引

Question

我正在使用 owl 轮播 2。我的页面上有几个按钮。单击其中一个按钮时，将出现 AJAX 调用。从那个 ajax 调用中得到一个图像 ID。我将该图像 ID 与 owl 轮播中的一个进行比较，然后想跳转到匹配的幻灯片。

不过，随便我试索引号returns0。所以 owl 总是跳到第一张图片。我尝试了几件事，但就是无法正常工作。

我的按钮列表

<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
    }
  });
});

我只是看不出获取索引有什么问题。我用这个 question 作为参考。

有什么想法吗？提前致谢

Answer 1

好的，我找到了问题的答案！问题是我试图获取错误元素的索引。 Owl 轮播将每个项目包装在一个名为 owl-item 的 div 中。因此，当您尝试获取某个项目的索引号时，它将始终为索引 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()

Owl 轮播在 ajax 调用后跳转到特定索引

Owl carousel jumpt to specific index after ajax call

javascript

jquery

owl-carousel