Skip to content

Commit f3f0420

Browse files
committed
Update Readme
1 parent 7b4ae76 commit f3f0420

File tree

1 file changed

+54
-3
lines changed

1 file changed

+54
-3
lines changed

README.md

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,61 @@
11
# OWL Carousel #
22
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
33

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
613

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)
717

818
### 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)
1061

0 commit comments

Comments
 (0)