owl-carousel

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css">
<div class="holder">
  <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: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:600px"><h4>15</h4></div>
</div>
</div>

<button class="customNextBtn">xx</button>

<button class="customPrevBtn">xx</button>

CSS

.holder {
  width: 500px;
  border: 1px sold grey;
}

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

.owl-theme .owl-controls .owl-page {
  display: inline-block;
}

.owl-theme .owl-controls .owl-page span {
  background: none repeat scroll 0 0 #869791;
  border-radius: 20px;
  display: block;
  height: 12px;
  margin: 5px 7px;
  opacity: 0.5;
  width: 12px;
}

JavaScript

$(document).ready(function() {

var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    owl.trigger('prev.owl.carousel', [300]);
})


});