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_main'或任何你想要的东西），如

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

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

我不确定这是不是很好的解决方案。它对我有用。

多个猫头鹰旋转木马，定制个人定制导航

1 个答案: