Owlcarousel2: Multiple owl carousels on one page with responsive items

[RoFiks]

Hi there,

I found a bug when having multiple owl carousels on a page and one has different responsive items. When the page loads, all carousels are working fine. But when I resize the window, all the owl carousels get the responsive items from the one carousel with responsive items. Even when I give the other owl carousels responsive items and set those to 'items : 1' on all breakpoints, it still gets the number of the other carousel.

Hope you can help!

$('.home-slider').owlCarousel({
      loop: false,
      margin: 0,
      nav: false,
      items: 1,
      dots: true,
      dotsSpeed: 1000,
      responsiveClass: true,
      center: false,
      responsiveRefreshRate: true
});

$('.products-slider').owlCarousel({
      loop: true,
      margin: 20,
      center: true,
      nav: false,
      dots: false,
      responsiveClass: true,
      responsiveRefreshRate: true,
      responsive : {
          0 : {
              items: 1
          },
          768 : {
              items: 3
          },
          960 : {
              items: 4
          },
          1200 : {
              items: 5
          },
          1920 : {
              items: 8
          }
      }
});

[coffeeneed]

Problem here too :( Will this be fixed some time?

[Ansif]

Hi,

Is there any fix for this? I really want it!! :(

Thanks! :+1:

[jhavmoeller]

Any update on this?

[esstonia]

use the javascript owl.carousel.min.js or owl.carousel.js from the development and it will work.

[rlburb]

That worked great! But now my nav buttons are messed up. Is the development css different as well?

Edit:
It looks like the dev js doesn't use the "owl-theme" or the "owl-controls" classes for the nav buttons like the other one does

[CupIvan]

I had the same problem. My solution was updated plugin owl.carousel2.thumbs from v0.1.7 to v0.1.8. It had a bug which replaced all options in previous owl objects.

[ryooryooryoo]

its working for me, thank a lot :)

[wickywills]

This issue still exists with the latest version..

[Takaya213]

Yes, also experiencing this issue.

[foobearer]

Hi there. Hope this issue has a fix. :(

[foobearer]

Hi @RoFiks, you can solve this issue by putting an ID to each div that has ".owl-carousel .owl-theme"
classes. Then call the Owl initializer using their respective IDs that you set.

$('#carousel01').owlCarousel({
    loop:true,
    margin:10,
    nav:false,
    responsive:{
        0:{
            items:2
        },
        600:{
            items:2
        },
        1000:{
            items:6
        }
    }
});

$('#carousel02').owlCarousel({
    loop: true,
    margin:10,
    nav:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:3
        }
    }
});

[hasanshahrear]

foobearer your logic work.. Thanks

[carlosferragut]

@foobearer That worked for me. Best solution found!

[nurbol-sarsenbayev]

I have a solution for this problem. You should change code in owl.carousel2.thumbs.min.js.
Replace this snippet

       // set default options
       this.owl.options = $.extend(Thumbs.Defaults, this.owl.options);

to

        // set default options
        this.owl.options.thumbs = true;
        this.owl.options.thumbImage = false;
        this.owl.options.thumbContainerClass = 'owl-thumbs';
        this.owl.options.thumbItemClass = 'owl-thumb-item';
        this.owl.options.moveThumbsInside = false;

Then it will work fine!!

[hasanshahrear]

Thank you very much.

On Thu, Jan 11, 2018 at 1:22 PM, nurbol-sarsenbayev <
[email protected]> wrote:

I have a solution for this problem. You should change code in
owl.carousel2.thumbs.min.js.
Replace this snippet
// set default options
this.owl.options = $.extend(Thumbs.Defaults, this.owl.options);
to
// set default options
this.owl.options.thumbs = true;
this.owl.options.thumbImage = false;
this.owl.options.thumbContainerClass = 'owl-thumbs';
this.owl.options.thumbItemClass = 'owl-thumb-item';
this.owl.options.moveThumbsInside = false;
Then it will work fine!!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/OwlCarousel2/OwlCarousel2/issues/1242#issuecomment-356847943,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATyn-VSGwdhvG7BWRXUzGqKo5iU3DnNwks5tJbavgaJpZM4HeJzQ
.

[MuhammadBilalMughal]

$(document).ready(function() {

var carouselCount = 0;
$(".owl-carousel").each(function () {
    $(this).attr("id", "owl-carousel" + carouselCount);
    $('#owl-carousel' + carouselCount).owlCarousel({
        items: 4,
        itemsDesktop: [1199, 4],
        itemsDesktopSmall: [980, 2],
        itemsTablet: [768, 1],
        itemsTabletSmall: false,
        itemsMobile: [479, 1],
        rewindNav: false,
        navigation: true,
        navigationText: ["Prev", "Next"],

        // Responsive 
        responsive: true,
        responsiveRefreshRate: 200,
        responsiveBaseWidth: window,

        //Pagination
        pagination: false
    });
    carouselCount++;
});

});