library owlcarousel

jcvb/owlcarousel

carousel for slides

New version 2.0.0-beta now available for testers. Check it

OwlCarousel

v.1.3.3, _(*1)

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. Visit Owl Carousel landing page, _(*2)

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., _(*3)

More Demos

See what Owl can do: * With auto scaling images * Full Width * Custom Widths * One Item * More demos, _(*4)

1.Getting Started

Load jQuery(1.7+) and include Owl Carousel plugin files, _(*5)

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

 <!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

<!-- Include js plugin -->
<script src="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 inside the container element, _(*6)

<, _(*7)

div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file., _(*8)

<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  ...
</div>

3.Call the plugin

Now call the Owl initializer function and your carousel is ready., _(*9)

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

4. For more details visit OwlCarousel landing page

Changelog available here

License

The MIT License (MIT), _(*10)