CODEWITHSUNDEEP
javascriptjqueryowl-carousel
Lindsayw
Lindsayw

Reputation: 13

multiple owl carousel's, target individual with custom navigation

I'm in early stages of learning Jquery. I've got multiple carousels on a single page with custom navigation, I just can't seem to target them individually. They all move when the button is clicked.

Any help would be greatly appreciated.

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

Upvotes: 1

Views: 798

Answers (1)

taymyinl
taymyinl

Reputation: 295

You need to add class name ('div_main' or anything you want) in each carousel div tag like as

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

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

I'm not sure it's good solution or not. It's working for me.

Upvotes: 2

Related Questions