|
1 | 1 | # OWL Carousel #
|
2 | 2 | Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
|
3 | 3 |
|
4 |
| -### [OwlCarousel landing page][1] |
5 |
| -[1]: http://owlgraphic.com/owlcarousel |
| 4 | +####Features: |
| 5 | +* Responsive |
| 6 | +* Touch Event |
| 7 | +* Mouse Slide Events |
| 8 | +* Fully Customizable |
| 9 | +* Choose the number of items to be displayed |
| 10 | +* Multiple Sliders |
| 11 | +* CSS3 3d Transitions |
| 12 | +* Custimizable controlls |
6 | 13 |
|
| 14 | +> Tested on IE7, IE8, IE9, IE10, Chrome, Safari, Firefox, Opera, Dolphin, iPhone, iPad, Google Nexus. |
| 15 | +
|
| 16 | +## [OwlCarousel landing page](http://owlgraphic.com/owlcarousel) |
7 | 17 |
|
8 | 18 | ### More Demos
|
9 |
| -* [With auto scaling images][2] |
| 19 | +See what Owl can do: |
| 20 | +* [With auto scaling images](http://owlgraphic.com/owlcarousel/demos/images.html) |
| 21 | +* [Full Width](http://owlgraphic.com/owlcarousel/demos/full.html) |
| 22 | +* [Custom Widths](http://owlgraphic.com/owlcarousel/demos/custom.html) |
| 23 | +* [One Item](http://owlgraphic.com/owlcarousel/demos/one.html) |
| 24 | + |
| 25 | +## 1.Getting Started |
| 26 | +Load jQuery(1.7+) and include Owl Carousel plugin files |
| 27 | + |
| 28 | +```html |
| 29 | +<!-- Basic stylesheet --> |
| 30 | +<link rel="stylesheet" href="owl-carousel/owl.carousel.css"> |
| 31 | + |
| 32 | + <!-- Default Theme --> |
| 33 | +<link rel="stylesheet" href="owl-carousel/owl.theme.css"> |
| 34 | + |
| 35 | +<!-- Include js plugin --> |
| 36 | +<script src="assets/owl-carousel/owl.carousel.v1.0.js"></script> |
| 37 | +``` |
| 38 | +## 2.Set up your HTML |
| 39 | +You don't need any special markup. All you need is to wrap your divs inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file. |
| 40 | + |
| 41 | +```html |
| 42 | +<div class="owl-carousel owl-theme"> |
| 43 | + <div> Your Content </div> |
| 44 | + <div> Your Content </div> |
| 45 | + <div> Your Content </div> |
| 46 | + <div> Your Content </div> |
| 47 | + <div> Your Content </div> |
| 48 | + <div> Your Content </div> |
| 49 | + <div> Your Content </div> |
| 50 | + ... |
| 51 | +</div> |
| 52 | +``` |
| 53 | +## 3.Call the plugin |
| 54 | +Now call the Owl initializer function and your carousel is ready. |
| 55 | + |
| 56 | +```html |
| 57 | +$(".owl-carousel").owlCarousel(); |
| 58 | +``` |
| 59 | + |
| 60 | +### For more information visit [OwlCarousel landing page](http://owlgraphic.com/owlcarousel) |
10 | 61 |
|
0 commit comments