0

Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider

Owl Carousel 2 is one of the best free carousel plugin that comes with lots of features:

  • Infinity Loop,
  • Center item,
  • Smart Speed,
  • Stage Padding,
  • Item Margin,
  • Ability to make almost all options responsive,
  • Various Widths,
  • Callback Events,
  • RTL,
  • YouTube/Vimeo/vzaar support (fetching thumbnails as well),
  • Anchors navigation,
  • Merged Items,
Basic
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
<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>
body {
    color: #222;
    font-family: "Lato","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
}

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

.owl-carousel .item h4 {
    color: #FFF;
    font-weight: 400;
    margin-top: 0rem;
  font-size: 20px;
}
RUN
Autoplay
var owl = $('.owl-carousel');
owl.owlCarousel({
    items:4,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:1000,
    autoplayHoverPause:true
});

$('.play').on('click',function(){
    owl.trigger('play.owl.autoplay',[1000])
});

$('.stop').on('click',function(){
    owl.trigger('stop.owl.autoplay')
});
<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>


<button class="play">Play</button>
<button class="stop">Stop</button>
body {
    color: #222;
    font-family: "Lato","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
}

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

.owl-carousel .item h4 {
    color: #FFF;
    font-weight: 400;
    margin-top: 0rem;
  font-size: 20px;
}

button {
   	background-color: #e7e7e7;
    border-color: #b9b9b9;
    color: #333;
  	padding: 20px;
  	cursor: pointer;
  	border: 0;
  	font-size: 22px;
}
RUN
Url Hash Navigation

    $('.owl-carousel').owlCarousel({
        items:4,
        loop:false,
        center:true,
        margin:10,
        URLhashListener:true,
        autoplayHoverPause:true,
        startPosition: 'URLHash'
    });
<div class="owl-carousel owl-theme">
            <div class="item" data-hash="zero">
              <h4>0</h4>
            </div>
            <div class="item" data-hash="one">
              <h4>1</h4>
            </div>
            <div class="item" data-hash="two">
              <h4>2</h4>
            </div>
            <div class="item" data-hash="three">
              <h4>3</h4>
            </div>
            <div class="item" data-hash="four">
              <h4>4</h4>
            </div>
            <div class="item" data-hash="five">
              <h4>5</h4>
            </div>
            <div class="item" data-hash="six">
              <h4>6</h4>
            </div>
            <div class="item" data-hash="seven">
              <h4>7</h4>
            </div>
            <div class="item" data-hash="eight">
              <h4>8</h4>
            </div>
            <div class="item" data-hash="nine">
              <h4>9</h4>
            </div>
            <div class="item" data-hash="ten">
              <h4>10</h4>
            </div>
            <div class="item" data-hash="eleven">
              <h4>11</h4>
            </div>
            <div class="item" data-hash="tweleve">
              <h4>12</h4>
            </div>
            <div class="item" data-hash="thirteen">
              <h4>13</h4>
            </div>
            <div class="item" data-hash="fourteen">
              <h4>14</h4>
            </div>
            <div class="item" data-hash="fifteen">
              <h4>15</h4>
            </div>
          </div>

<div class="buttons">
  <a class="button secondary url" href="#zero">zero</a> 
          <a class="button secondary url" href="#three">three</a> 
          <a class="button secondary url" href="#five">five</a> 
          <a class="button secondary url" href="#seven">seven</a> 
          <a class="button secondary url" href="#ten">ten</a> 
</div>
body {
    color: #222;
    font-family: "Lato","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
}

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

.owl-carousel .item h4 {
    color: #FFF;
    font-weight: 400;
    margin-top: 0rem;
  font-size: 20px;
}

.buttons {
  padding-top: 20px;
}

.button {
   	background-color: #e7e7e7;
    border-color: #b9b9b9;
    color: #333;
  	padding: 20px;
  	cursor: pointer;
  	border: 0;
  	font-size: 22px;
}
RUN
Auto Width
$('.owl-carousel').owlCarousel({
    margin:10,
    loop:true,
    autoWidth:true,
    items:4
})
<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>
body {
    color: #222;
    font-family: "Lato","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
}

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

.owl-carousel .item h4 {
    color: #FFF;
    font-weight: 400;
    margin-top: 0rem;
  font-size: 20px;
}
RUN
add comment
Suggest a different solution or add another example