Owlcarousel2: Changing item-count for responsive devices

[florianmatthias]

I was using the first version of the Plugin with the following settings.

$(".featured-products .group").owlCarousel({
        items: 1,
        //items : 4,
        //itemsDesktopSmall : [1199,3],
        //itemsTablet: [767,2],
        //itemsMobile: [480,1],

});

How can I make the same breakpoints for the item-counts work for the new version?

[tonykiefer]

Try using media queries. I use them on the carousel and they work great
On Apr 28, 2016 2:19 PM, "florianmatthias" [email protected] wrote:

I was using the first version of the Plugin with the following settings.

$(".featured-products .group").owlCarousel({
items: 1,
//items : 4,
//itemsDesktopSmall : [1199,3],
//itemsTablet: [767,2],
//itemsMobile: [480,1],

});

How can I make the same breakpoints for the item-counts work for the new version?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
https://github.com/OwlCarousel2/OwlCarousel2/issues/1363

[florianmatthias]

Thank you. How do I use media-queries on that?

.owl-item {
    width: 100%;
}

@media screen and (max-width:767px){
    .owl-item {
        width: 50%;
    }
}

@media screen and (max-width:1199px){
    .owl-item {
        width: 25%;
    }
}

doesn't work, and adding the responsive: true param on the function-call is causing an error for me:
http://i.imgur.com/iW8wdBg.png

Also do I have to set an Icon-count in that case? Or do I leave this param out?

[SaintPepsi]

Having the same problem. Could only find things about the outdated version.

[tonykiefer]

you can add a functionality in your document.ready call and in the call to owlCarousel.js to identify responsive layouts. Here is a link that will help you write a media query in js...

http://www.sitepoint.com/javascript-media-queries/

You'll want to create a variable for "items"...
Once you programmatically determine the change in media you can set the value "items" = "to however many images you want to show"...

then when you call .owlCarousel (again this is all handled in the document.ready) you can pass the navigation default value of "item".

An example of passing navigation defaults from the document.ready is...
.owlCarousel({
margin: 20,
items: 3,
center: true,
dots: true,
autoWidth: false,
In the owlCarousel.js file do a search for Navigation Defaults so you can see more options.

This should do it for you.

[hvsh]

@florianmatthias @tonykiefer @SaintPepsi

.owlCarousel({
items:3,
responsive : {
      // breakpoint from 0 up
      0 : {
          option1 : value,
          option2 : value,
          ...
      },
      // breakpoint from 480 up
      480 : {
          option1 : value,
          option2 : value,
          ...
      },
      // breakpoint from 768 up
      768 : {
          option1 : value,
          option2 : value,
          ...
      }
  }

});