Auto Width Demo | Owl Carousel | 2.2.0

loop: false, autoWidth: true,

by Stanislav

HTML

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/OwlCarousel2/2.2.0/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css">
<script src="https://cdn.bootcss.com/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<section id="demos">
  <div class="row">
    <div class="large-12 columns">
      <div class="owl-carousel owl-theme">
        <div class="item" style="width:250px">
          <h4>1</h4>
        </div>
        <div class="item" style="width:100px">
          <h4>2</h4>
        </div>
        <div class="item" style="width:500px">
          <h4>3</h4>
        </div>
        <div class="item" style="width:100px">
          <h4>4</h4>
        </div>
        <div class="item" style="width:80px">
          <h4>5</h4>
        </div>
        <div class="item" style="width:50px">
          <h4>6</h4>
        </div>
        <div class="item" style="width:250px">
          <h4>7</h4>
        </div>
        <div class="item" style="width:120px">
          <h4>8</h4>
        </div>
        <div class="item" style="width:420px">
          <h4>9</h4>
        </div>
        <div class="item" style="width:120px">
          <h4>10</h4>
        </div>
        <div class="item" style="width:300px">
          <h4>11</h4>
        </div>
        <div class="item" style="width:450px">
          <h4>12</h4>
        </div>
        <div class="item" style="width:220px">
          <h4>13</h4>
        </div>
        <div class="item" style="width:150px">
          <h4>14</h4>
        </div>
        <div class="item" style="width:60px">
          <h4>15</h4>
        </div>
      </div>
    </div>
  </div>
</section>

JavaScript

function owlInitialize() {
   if ($(window).width() < 1279) {
      $('.owl-carousel').owlCarousel()
   }else{
      $('.owl-carousel').owlCarousel('destroy')
   }
}

$(document).ready(function(e) {
   owlInitialize()
})

$(window).resize(function() {
   owlInitialize()
})