24686

owl carousel - Set different items number for each of many sliders placed on the same page

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

Answer1:

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>

<strong>I use jQuery to call them by my class name:</strong>

$(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 }

Answer2:

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

    <li>itemDesktop - for screen size 1400px(default) and above</li> <li>itemsDesktopSmall- for screen size 1100px(default) and above</li> <li>itemsTablet- for screen size 700px(default) and above</li> <li>itemsMobile- for screen size 500px(default) and above</li> </ul>

    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.

Recommend

  • Jena Sparql Error java.lang.Integer
  • Materializecss: carousel & slider not working
  • Using glob() to display images from a directory while echo'ing a unique first image
  • Bootstrap Carousel Next/Prev not working
  • How to retrieve elements of OWL enumerated datatype expression?
  • Unable to hide youtube iframes in safari?
  • Get current user from inside the model in Sails
  • Lua: Line breaks in strings
  • SPARQL date range
  • EntLib Way to Bind “Null” Value to Parameter
  • Sesame : how to remove the inference during queries?
  • Is there a way to save the selected text and highlight it again once the page is refreshed?
  • Django model inheritance, filtering models
  • Adjust width of select element according to selected option's width
  • Visual Studio 2010 debugger build correctly - compiler pdb and linker pdb not in synch?
  • How to get Eclipse Oxygen to run on Java 9
  • MailKit: The IMAP server replied to the 'EXAMINE' command with a 'BAD' response
  • D3 nodes and links from JSON with nested arrays of children
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • Is possible to count alias result on mysql
  • Modifying destination and filename of gulp-svg-sprite
  • XCode can't find symbols for a specific iOS library/framework project
  • R: gsub and capture
  • How to format a variable of double type
  • Matrix multiplication with MKL
  • How to delete a row from a dynamic generate table using jquery?
  • Benchmarking RAM performance - UWP and C#
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • using HTMLImports.whenReady not working in chrome
  • Hits per day in Google Big Query
  • Angular 2 constructor injection vs direct access
  • Java static initializers and reflection
  • Change div Background jquery
  • Android Google Maps API OnLocationChanged only called once
  • File not found error Google Drive API
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • UserPrincipal.Current returns apppool on IIS
  • Converting MP3 duration time
  • Net Present Value in Excel for Grouped Recurring CF