owl-carousel

by dke358

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 id="owl-demo">
	<div class="item"><a href="#">text111</a></div>
	<div class="item"><a href="#">text222</a></div>
	<div class="item"><a href="#">text333</a></div>
	<div class="item"><a href="#">text444</a></div>
	<div class="item"><a href="#">text555</a></div>
	<div class="item"><a href="#">text666</a></div>
  <div class="item"><a href="#">text777</a></div>
	<div class="item"><a href="#">text888</a></div>
	<div class="item"><a href="#">text999</a></div>
	<div class="item"><a href="#">textaaa</a></div>
	<div class="item"><a href="#">textbbb</a></div>
	<div class="item"><a href="#">textccc</a></div>
</div>

CSS

#owl-demo .item {
    margin: 3px;
}
#owl-demo .item img {
    display: block;
    width: 50%;
    height: auto;
}
.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: 30px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    opacity: 0.5;
    width: 12px;

}

JavaScript

$(document).ready(function () {
    $("#owl-demo").owlCarousel({
       
        items: 5,
        itemsDesktop: [1199, 5],
        itemsDesktopSmall: [979, 3],
        navigation:true,
      navigationText: [
        "<i class='icon-chevron-left icon-white'><</i>",
        "<i class='icon-chevron-right icon-white'>></i>"
      ],
        
    });
});