owl-carusel demo html

owl-carusel

<div id="owl-demo" class="owlCarousel">
	<div class="item">
		<img src="http://realtytech.com/wp-content/uploads/2015/04/idx-customlinks-391x167.jpg" alt="Owl Image" />
	</div>
	<div class="item">
		<img src="http://realtytech.com/wp-content/uploads/2015/04/idx-details-391x167.jpg" alt="Owl Image" />
	</div>
	<div class="item">
		<img src="http://realtytech.com/wp-content/uploads/2015/04/idx-lakedetails-391x167.jpg" alt="Owl Image" />
	</div>
	<div class="item">
		<img src="http://realtytech.com/wp-content/uploads/2015/04/idx-map-391x167.jpg" alt="Owl Image" />
	</div>
	<div class="item">
		<img src="http://realtytech.com/wp-content/uploads/2015/04/idx-results-391x167.jpg" alt="Owl Image" />
	</div>
</div>
				
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.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">
<style>
#owl-demo .item {
    margin: 3px;
}
#owl-demo .owl-controls .owl-pagination {
	text-align: center;
}
#owl-demo .item img {
    display: block;
    width: 100%;
    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: 20px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    opacity: 0.5;
    width: 12px;
}
.owl-theme .owl-controls .owl-page.active span {
    background: none repeat scroll 0 0 #000;
}
</style>				
<script>
	jQuery(document).ready(function () {
	    jQuery("#owl-demo").owlCarousel({

	        autoPlay: 3000, //Set AutoPlay to 3 seconds
	        dots: true,
	        items: 1,
	        itemsDesktop: [1199, 3],
	        itemsDesktopSmall: [979, 3]
	    });
	});					
</script>