Owl Carousel 2.1.4 Responsive

Demo responsive with autoWidth : true. loop: false

HTML

<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/OwlCarousel2/2.1.4/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/OwlCarousel2/2.1.4/assets/owl.theme.default.css">
<div class="owl-carousel">
    <div class="item" data-merge="1">
        <h4>kljgljhglhjgl</h4>
    </div>
    <div class="item" data-merge="2">
        <h4>2</h4>
    </div>
    <div class="item" data-merge="2">
        <h4>3</h4>
    </div>
    <div class="item" data-merge="2">
        <h4>4</h4>
    </div>
    <div class="item" data-merge="2">
        <h4>5</h4>
    </div>
    <div class="item" data-merge="2">
        <h4>6</h4>
    </div>
    <div class="item" data-merge="2">
        <h4>7</h4>
    </div>
    <div class="item" data-merge="2">
        <h4>8</h4>
    </div>
    <div class="item" data-merge="2">
        <h4>9</h4>
    </div>
    <div class="item" data-merge="1">
        <h4>10</h4>
    </div>
    <div class="item" data-merge="1">
        <h4>11</h4>
    </div>
    <div class="item" data-merge="1">
        <h4>12</h4>
    </div>
</div>

CSS

.owl-carousel .item {
    height: 10rem;
    padding: 1rem;
    background: #4DC7A0;
}

.owl-carousel .owl-item:nth-child(odd) .item {
    background: #4d7ec7;
}

JavaScript

/**
 * Owl Carousel v2.1.4
 * Copyright 2013-2016 David Deutsch
 * Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE)
 */
/**
 * Owl carousel
 * @version 2.1.0
 * @author Bartosz Wojciechowski
 * @author David Deutsch
 * @license The MIT License (MIT)
 * @todo Lazy Load Icon
 * @todo prevent animationend bubling
 * @todo itemsScaleUp
 * @todo Test Zepto
 * @todo stagePadding calculate wrong active classes
 */
;(function($, window, document, undefined) {

  /**
   * Creates a carousel.
   * @class The Owl Carousel.
   * @public
   * @param {HTMLElement|jQuery} element - The element to create the carousel for.
   * @param {Object} [options] - The options
   */
  function Owl(element, options) {

    /**
     * Current settings for the carousel.
     * @public
     */
    this.settings = null;

    /**
     * Current options set by the caller including defaults.
     * @public
     */
    this.options = $.extend({}, Owl.Defaults, options);

    /**
     * Plugin element.
     * @public
     */
    this.$element = $(element);

    /**
     * Proxied event handlers.
     * @protected
     */
    this._handlers = {};

    /**
     * References to the running plugins of this carousel.
     * @protected
     */
    this._plugins = {};

    /**
     * Currently suppressed events to prevent them from beeing retriggered.
     * @protected
     */
    this._supress = {};

    /**
     * Absolute current position.
     * @protected
     */
    this._current = null;

    /**
     * Animation speed in milliseconds.
     * @protected
     */
    this._speed = null;

    /**
     * Coordinates of all items in pixel.
     * @todo The name of this member is missleading.
     * @protected
     */
    this._coordinates = [];

    /**
     * Current breakpoint.
     * @todo Real media queries would be nice.
     * @protected
     */
    this._breakpoint = null;

    /**
     * Current width of the plugin element.
     */
    this._width = null;

   ...