OwlCarousel

v.2.0beta

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. Visit Owl Carousel landing page

###Features:

• Responsive
• Touch Events
• Mouse Slide Events
• Fully Customizable
• Choose the number of items to be displayed
• Multiple Sliders
• CSS3 3d Transitions
• Custimizable controls
• JSON
• Custom events
• Helpful callbacks

Tested on IE7, IE8, IE9, IE10, Chrome, Safari, Firefox, Opera, iPhone, iPad, Chrome on Google Nexus.

More Demos

See what Owl can do:

• With auto scaling images
• Full Width
• Custom Widths
• One Item
• More demos

1.Getting Started

mrt add owl-carousel

2.Set up your HTML

You don't need any special markup. All you need is to wrap your divs inside the container element . Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

1<div class="owl-carousel">
2  <div> Your Content </div>
3  <div> Your Content </div>
4  <div> Your Content </div>
5  <div> Your Content </div>
6  <div> Your Content </div>
7  <div> Your Content </div>
8  <div> Your Content </div>
9  ...
10</div>

3.Call the plugin

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

1$(".owl-carousel").owlCarousel();