Free carousel for many UI,Page custom design-OWL Carousel

Ref Link :  http://owlgraphic.com/owlcarousel/How To Use
1. Load jQuery and include Owl Carousel plugin files
To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included.

1. <!-- Important Owl stylesheet -->

1. <link rel="stylesheet" href="owl-carousel/owl.carousel.css">

1.  

1. <!-- Default Theme -->

1. <link rel="stylesheet" href="owl-carousel/owl.theme.css">

1.  

1. <!-- jQuery 1.7+ -->

1. <script src="jquery-1.9.1.min.js"></script>

1.  

1. <!-- Include js plugin -->

1. <script src="assets/owl-carousel/owl.carousel.js"></script>

2. Set up your HTML
You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

1. <div id="owl-example" class="owl-carousel">

1. <div> Your Content </div>

1. <div> Your Content </div>

1. <div> Your Content </div>

1. <div> Your Content </div>

1. <div> Your Content </div>

1. <div> Your Content </div>

1. <div> Your Content </div>

1. ...

1. </div>

3. Call the plugin
Now call the Owl initializer function and your carousel is ready.

1. $(document).ready(function() {

1.  

1. $("#owl-example").owlCarousel();

1.  

1. });

Demo

Touch

Can touch this

Grab

Can grab this

Responsive

Fully responsive!