2

I am currently trying to create a responsive carousel with varying amounts of items and widths/margins for which I am using Owl Carousel

Owl Carousel offers a great little option which allows you to specify how many items to show at a certain screen size in this fashion:

carousel.owlCarousel({
    items : 4,
    itemsDesktop : [1100,3],
    itemsDesktopSmall : [700,2],
    itemsTablet: [600,2],
    itemsMobile : [400, 1]
});

So between window width of 700 and 1100 the carousel will show 3 items.

This is the basic structure my carousel item takes.

<div class="owl-item">
    <div class="item">
        ITEM CONTENT
    </div>
</div>

Due to certain styling requirements there needs to be a percentage right hand margin on .item

I want to add this using media queries however as JS measures the width of the window and CSS media queries measure the width of the viewport, when there is a scrollbar present the values specified in my JS won't correlate with the CSS media query width.

Can anyone think of a solution to this? (Preferably without any heavy jquery)

Joe Taylor
  • 579
  • 1
  • 6
  • 21
  • jQuery uses viewport width: http://stackoverflow.com/questions/3044573/using-jquery-to-get-size-of-viewport Are you sure your plugin isn't doing the same? – isherwood Oct 14 '13 at 17:48
  • Sorry, maybe I'm getting my viewport and window mixed up. I'm using a chrome extension which prints out a window and viewport width and height. My CSS media query breakpoints respond to the higher value (which includes the scrollbar width) whereas the JS window width will read the smaller value (not including scrollbars) – Joe Taylor Oct 14 '13 at 20:20

0 Answers0