Owlcarousel2: How to create multiple Carousel in one page with Owl Carousel 2? (Having Problem to do it.)

[KawsikRoy]

I have the following structure:
````html

Javascript used is: java
$(document).ready(function(){
$('.owl-one').owlCarousel({
loop:true,
margin:10,
nav:true,
navText: ['next','prev'],
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});

$('.owl-two').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    navText: ['next','prev'],
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
});

$('.owl-three').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    navText: ['next','prev'],
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
});

});
````
I'm using OwlCarousel2 (v2.2.1)
But it doesn't work for me.
only giving a blank page with the owl-dots and owl-nav.

Is this Supported by OwlCarousel2?

If it does,

How to create multiple Carousel in one page with Owl Carousel 2?

[alfouz]

Yes, it is supported by OwlCarousel2.

Your problem is the same like on issue #1905

You need to put the "owl-carousel" class on your carousels, independently of number of them.

I let you a jsfiddle with your problem solved, i hope it helps you

https://jsfiddle.net/97j9gmtm/2/

[KawsikRoy]

Thanks a Lot. You've solved my problem.

<div class="owl-one owl-carousel owl-theme">
<div class="owl-two owl-carousel owl-theme">
<div class="owl-three owl-carousel owl-theme">

With class selectors

    $('.owl-one').owlCarousel({
    $('.owl-two').owlCarousel({
    $('.owl-three').owlCarousel({

I accept yours. 👍

Also I've found an other solution just in few minutes before.

<div id="owl-one" class="owl-carousel owl-theme">
<div id="owl-two" class="owl-carousel owl-theme">
<div id="owl-three" class="owl-carousel owl-theme">

With id selectors

    $('#owl-one').owlCarousel({
    $('#owl-two').owlCarousel({
    $('#owl-three').owlCarousel({

Both of them are working fine 👍

[LiamMcArthur]

This also fixed my problem. Thank you @alfouz!

[digitalroni]

thanks

[cornelious-replete]

Fixed my query.. thanks @alfouz

[jasonrundell]

@KawsikRoy since your carousels all have the same settings, you can also try this lighter js method:

$(".owl-carousel").each(function(){
    $(this).owlCarousel({
      loop:true,
        margin:10,
        nav:true,
        navText: ['next','prev'],
        responsive:{
            0:{
                items:1
            },
            600:{
                items:1
            },
            1000:{
                items:1
            }
        }
    });
  });

[axodjakov]

thank you for the answers!

[vinsse2001]

Thanks !
I'm not used with jquery so i just copy-past your answer, but it did not work. So I search to understand syntax, and I just changed $(".gallery__carousel") with $(".owl-carousel") and now, it works fine !
(I have up to 8 carousels on same page)

[jasonrundell]

@vinsse2001 haha yes sorry I guess I should have used the default owl class in my example. But ya, you can target whatever you want - just has to be the right name ;)

[justplayd]

$(function(){
$('.slider1').owlCarousel();
$('.slider2').owlCarousel();
});

short variant

$(function(){
$('.slider').each(function(){
$(this).owlCarousel();
});
});

[saurabhshukla123]

thank you... you are great

[topzdev]

Thanks mate! you solved my problemmm!!!

[sabbir74746]

I've tried this way, in my case, nav arrow is disabled for others except the first one.

[amirlourch]

Thanks a Lot. You've solved my problem.

<div class="owl-one owl-carousel owl-theme">
<div class="owl-two owl-carousel owl-theme">
<div class="owl-three owl-carousel owl-theme">

With class selectors

    $('.owl-one').owlCarousel({
    $('.owl-two').owlCarousel({
    $('.owl-three').owlCarousel({

I accept yours. 👍

Also I've found an other solution just in few minutes before.

<div id="owl-one" class="owl-carousel owl-theme">
<div id="owl-two" class="owl-carousel owl-theme">
<div id="owl-three" class="owl-carousel owl-theme">

With id selectors

    $('#owl-one').owlCarousel({
    $('#owl-two').owlCarousel({
    $('#owl-three').owlCarousel({

Both of them are working fine 👍

جیران دوز بود آفرین

[Putoleve]

Thank you, it helped.

[mabel-golden-owl]

❤️ 🔥 👍

[Stylish-Girish1]

Fail*FailFailFailFailFailFailFail*
$(document).ready(function(){
$('.owl-one').owlCarousel({
loop:true,
margin:10,
nav:true,
navText: ['next','prev'],
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
});

$('.owl-two').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    navText: ['next','prev'],
    responsive:{
        0:{
            items:1
        },
        600:{
            items:2
        },
        1000:{
            items:2
        }
    }
});

$('.owl-three').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    navText: ['next','prev'],
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
});

});

[seirralanzce]

after reading i use data-attribute to determine the numbers
<div class="owl-carousel owl-theme multiCarosel" data-number="1">

$('.multiCarosel').each(function(){
    var number = $(this).data('number');
    $(this).owlCarousel({
      center: false,
      loop: true,
      items: 1,
      dots: false,
      nav:true,
      responsiveClass:true,
      navContainer: '.kernNav-'+number,
      navText: [
        '<span class="btn btn-block px-3"><i class="fas fa-chevron-left fa-2x fa-inverse"></i></span>',
        '<span class="btn btn-block px-3"><i class="fas fa-chevron-right fa-2x fa-inverse"></i></span>'
      ],
    });
  });

hope this helps ppl~

[unlockdesgn]

Is there any example for Owl carousel under bootstrap tab ?