多個貓頭鷹旋轉木馬的目標個人與自定義導航

Question

我在學習Jquery的早期階段。 我在自定義導航的單個頁面上有多個輪播，我似乎無法單獨針對他們。當按鈕被點擊時，它們都會移動。

任何幫助將不勝感激。

var mainowl = $('.owl-carousel'); 

mainowl.owlCarousel(); 
$('.card--carousel-controls__next').click(function() { 
    event.preventDefault(); 
    mainowl.trigger('prev.owl.carousel'); 
}); 
$('.card--carousel-controls__prev').click(function() { 
    event.preventDefault(); 
    mainowl.trigger('next.owl.carousel'); 
}); 

Answer 1

你需要在每個轉盤div標籤等作爲

<div class="row__inner owl-carousel owl-carousel owl-theme div_main"> 
</div> 

添加類名（你想 'div_main' 或任何東西）在Javascript中

$('.card--carousel-controls__next').click(function() { 
    event.preventDefault(); 
    $(this).closest(".div_main").children('.owl-nav').children('.owl-next').trigger("click"); 
}); 

$('.card--carousel-controls__prev').click(function() { 
    event.preventDefault(); 
    $(this).closest(".div_main").children('.owl-nav').children(".owl-prev").trigger("click"); 
}); 

我不知道這是很好的解決方案。它爲我工作。