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