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.

Answer 1

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>

Answer 2

I think you can you use attribute width with unit %

$('.owl-carousel').attr("width", "100%")

With unit % width of carousel will responsive follow width of screen device.

Other, you can use css3 to responsive.Corresponding with width of screen device you set width different.

That all i know. if you want :

1. Always show 1 element : you should set width of owl-item is 100% and width of owl-carousel is : 100% .Or always show 2,3,4,5,.... you should set width of owl-item is (100/2) %, (100/3)%, (100/4)%, ...
2. Corresponding with screen will show 4 for desktop, 1 for mobile :you show use breakpoint to set width. In other, you can try attribute min-width or max-width for owl-item to make it