owl carousel - Set different items number for each

Question

I have a page with multiple sliders that are created with owl carousel. I would like to define different number of visible items for each slider. The perfect solution would be to define number of visible items in HTML (as a class or data). I am just starting using jQuery so I only managed to pass a value using data attribute like this:

<div class="owl-carousel" data-itemsnumber="5">...</div>

Then I applied this value to a variable in JS and add this variable in settings instead of items number like this.

var slides = $('.owl-carousel').data('itemsnumber');
$(".owl-carousel").owlCarousel(
{
  items: slides
});

The above code is not working properly as value from first slider is applied to all sliders on page, and I need each of them to have different number of items. How can I achieve this?

Thanks in advance

Answer 1

There are some pre-defined options defined in owl-carousels:

• itemDesktop - for screen size 1400px(default) and above
• itemsDesktopSmall- for screen size 1100px(default) and above
• itemsTablet- for screen size 700px(default) and above
• itemsMobile- for screen size 500px(default) and above

You could use the above options to set how many items would be shown according to the screen width. some what like this:

 $(".owl-carousel-product").owlCarousel({
                                items: 3,
                                itemsDesktop: [1400, 3],//1400:screen size, 3: number if items in the slide
                                itemsDesktopSmall: [1100, 2],
                                itemsTablet: [700, 1],
                                itemsMobile: [500, 1]
                              });

Also if you are using the carousels for images, then images might overlap at different screens. so you could make the width of images 100% in your css file.

Answer 2

The css for Owl Carousel (for version 1 -- I haven't used 2 in production) is .owl-carousel and .owl-theme (added by the script). Since I have shared styles among all sliders and specific styles for other sliders, I use .owl-carousel OR just the class name since .owl-controls are not shared by any other style anywhere else. I can just style .owl-controls if they are global to all my sliders. If you need to style different controls for different sliders you would be more specific with your CSS such as .myfunky-slider .owl-controls {}.

I use .owl-carousel on the html with my own class for that slider:

<div class="mini-multi owl-carousel">
    ...items go here ...
</div>

<div class="content-slider owl-carousel">
    ...items go here ...
</div>

<div class="full-width-slider owl-carousel">
    ...items go here ...
</div>

I use jQuery to call them by my class name:

$(document).ready(function() {

    $(".content-slider").owlCarousel({
        ...OPTIONS...
     });


    $(".full-width-slider").owlCarousel({
        ...OPTIONS THAT are different ...
    });

    $(".mini-multi").owlCarousel({
        ...OPTIONS that are different ...

        items: 6,
        itemsDesktop: [1400, 6],
        itemsDesktopSmall: [1100, 4],
        itemsTablet: [700, 3],
        itemsMobile: [500, 2]
    });

});

I style them with shared and specific styles based on shared or specific class names:

/* ---- base shared styles ---- */
.owl-carousel {
    ...styles...
}
.owl-pagination .owl-page span {
    ...styles...
}
.owl-pagination {
    ...styles...
}
.owl-page {
    ...styles...
}
.owl-controls {
    ...styles...
}
.owl-pagination .owl-page.active span,
.owl-controls.clickable .owl-pagination .owl-page:hover span {
    ...styles...
}

/* --- assumes all sliders will have fluid images  --- */

.owl-carousel .item img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- .mini-multi slider  --- */
.mini-multi .item {
    background:red;
}

/* --- .full-width-slider slider  --- */
.full-width-slider .item {
    border:5px solid green
}

Answer 3

i found this as best solution hope it helps,

$(".owl-class-name").owlCarousel({
    loop: true,
    margin: 0,
    nav: true,
    responsive : {
      //breakpoint from 0 and up
      0 : {
         items : 1,
      },
      // add as many breakpoints as desired , breakpoint from 480 up
      480 : {
         items:1,
      },
      // breakpoint from 768 up
      768 : {
          items:2,
      },
      992 :{
          items:3,
      },
  }
  });