pstenstrm pstenstrm - 1 year ago 409
CSS Question

Center OwlCarousel when less than X items

We're using OwlCarousel 1.3.3 on our responsive site. We've set the max number of items to 4.

items: 4,
itemsDesktop: [1000, 4],
itemsDesktopSmall: [900, 3],
itemsTablet: [600, 2],
itemsMobile: [480, 1]

As long as the carousel contains 4 or more images everything works fine. But when an editor only adds 3 or less items we want those items to be centered on the page. Right now they're "left aligned" and it doesn't look very good.

The option
is not what I'm looking for. If items is set to 4 but the carousel only contains 1 item that item would get too big.

I've found these issues on github:

But nothing I find helpful.

You can see the issue in this codepen.


Looking through the source of OwlCarousel you'll see that the
elements width gets multiplied with 2. But I can't figure out why, and if it's safe to remove the multiplier.

I've opened this github issue to try to get some clarification.

Answer Source

OwlCarousel has a 2x multiplier on the .owl-wrapper elements width. This multiplier makes it incredibly hard to center the carousel when it's less than full.

However, this multiplier doesn't seem to have any reason to be there. Nothing seems to break when I remove it. So that's what I did, the updated owl.carousel.js can be found here:

And I added this CSS (which is not included in the repo):

.owl-wrapper {
    margin: 0 auto;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download