| 5 |
lars |
1 |
##New version 2.0.0-beta now available for testers. [Check it](http://www.owlgraphic.com/owlcarousel2/)
|
|
|
2 |
|
|
|
3 |
### OwlCarousel ###
|
|
|
4 |
>v.1.3.3
|
|
|
5 |
|
|
|
6 |
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
|
|
|
7 |
[Visit Owl Carousel landing page](http://owlgraphic.com/owlcarousel)
|
|
|
8 |
|
|
|
9 |
###Features:
|
|
|
10 |
* Responsive
|
|
|
11 |
* Touch Events
|
|
|
12 |
* Mouse Slide Events
|
|
|
13 |
* Fully Customizable
|
|
|
14 |
* Choose the number of items to be displayed
|
|
|
15 |
* Multiple Sliders
|
|
|
16 |
* CSS3 3d Transitions
|
|
|
17 |
* Custimizable controls
|
|
|
18 |
* JSON
|
|
|
19 |
* Custom events
|
|
|
20 |
* Helpful callbacks
|
|
|
21 |
|
|
|
22 |
> Tested on IE7, IE8, IE9, IE10, Chrome, Safari, Firefox, Opera, iPhone, iPad, Chrom on Google Nexus.
|
|
|
23 |
|
|
|
24 |
|
|
|
25 |
### More Demos
|
|
|
26 |
See what Owl can do:
|
|
|
27 |
* [With auto scaling images](http://owlgraphic.com/owlcarousel/demos/images.html)
|
|
|
28 |
* [Full Width](http://owlgraphic.com/owlcarousel/demos/full.html)
|
|
|
29 |
* [Custom Widths](http://owlgraphic.com/owlcarousel/demos/custom.html)
|
|
|
30 |
* [One Item](http://owlgraphic.com/owlcarousel/demos/one.html)
|
|
|
31 |
* [More demos](http://owlgraphic.com/owlcarousel/#more-demos)
|
|
|
32 |
|
|
|
33 |
### 1.Getting Started
|
|
|
34 |
Load jQuery(1.7+) and include Owl Carousel plugin files
|
|
|
35 |
|
|
|
36 |
```html
|
|
|
37 |
<!-- Basic stylesheet -->
|
|
|
38 |
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
|
|
|
39 |
|
|
|
40 |
<!-- Default Theme -->
|
|
|
41 |
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
|
|
|
42 |
|
|
|
43 |
<!-- Include js plugin -->
|
|
|
44 |
<script src="owl-carousel/owl.carousel.js"></script>
|
|
|
45 |
```
|
|
|
46 |
### 2.Set up your HTML
|
|
|
47 |
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.
|
|
|
48 |
|
|
|
49 |
```html
|
|
|
50 |
<div class="owl-carousel">
|
|
|
51 |
<div> Your Content </div>
|
|
|
52 |
<div> Your Content </div>
|
|
|
53 |
<div> Your Content </div>
|
|
|
54 |
<div> Your Content </div>
|
|
|
55 |
<div> Your Content </div>
|
|
|
56 |
<div> Your Content </div>
|
|
|
57 |
<div> Your Content </div>
|
|
|
58 |
...
|
|
|
59 |
</div>
|
|
|
60 |
```
|
|
|
61 |
### 3.Call the plugin
|
|
|
62 |
Now call the Owl initializer function and your carousel is ready.
|
|
|
63 |
|
|
|
64 |
```html
|
|
|
65 |
$(".owl-carousel").owlCarousel();
|
|
|
66 |
```
|
|
|
67 |
### 4. For more details visit [OwlCarousel landing page](http://owlgraphic.com/owlcarousel)
|
|
|
68 |
##### Changelog available [here](http://owlgraphic.com/owlcarousel/changelog.html)
|
|
|
69 |
|
|
|
70 |
|
|
|
71 |
|
|
|
72 |
License
|
|
|
73 |
------------
|
|
|
74 |
The MIT License (MIT)
|