Owl Carousel No Fixed Width

Question

so I'm trying to use Owl Carousel without a fixed width because I need a responsive Wordpress site with no fixed images or widths, otherwise it breaks my mobile views.

I tried uncommenting the lines in owlcarousel.js where _width and _widths are set, and that sort of worked, except the items were then not centered within the .owl-stage. When I tried to alter the dimensions of the .owl-stage the entire thing broke.

Can anyone give advice on how to do this? I just want a responsive deployment of Owl Carousel where the widths etc are relative, rather than fixed.

Does the demo on the documentation homepage do what you're expecting? It says it's responsive — adriancarriger
@adriancarriger It behaves as I expect according to the documentation, but it isn't what I want. The responsive functionality doesn't help me because it appears to be prefaced on the amount of items being shown at a time, I want one item shown at all times, so a change in item count being shown doesn't help me. I simply want the slider to work without generating fixed widths on important elements. — Summer Developer

adriancarriger adriancarriger · Accepted Answer · 2016-12-24T04:58:36

Fiddle

Set items to 1

To make the Owl Carousel 2 show a single responsive slide you need to set the number of items to 1 instead of the default 3 and there is no need to use the responsive options offered in the docs because you always want to show a single slide.

JavaScript

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items: 1
})

Full Code

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items: 1
})

.item {
  background-color: #4DC7A0;
  color: white;
  font-size: 30px;
  height: 150px;
  padding: 10px;
}

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>