Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/OwlCarousel2/OwlCarousel2
DEPRECATED jQuery Responsive Carousel.
https://github.com/OwlCarousel2/OwlCarousel2
Last synced: 11 days ago
JSON representation
DEPRECATED jQuery Responsive Carousel.
- Host: GitHub
- URL: https://github.com/OwlCarousel2/OwlCarousel2
- Owner: OwlCarousel2
- License: other
- Created: 2014-04-15T01:13:48.000Z (over 10 years ago)
- Default Branch: develop
- Last Pushed: 2024-08-03T17:20:15.000Z (3 months ago)
- Last Synced: 2024-10-29T11:22:06.212Z (15 days ago)
- Language: JavaScript
- Homepage: http://owlcarousel2.github.io/OwlCarousel2/
- Size: 2.69 MB
- Stars: 7,913
- Watchers: 276
- Forks: 2,267
- Open Issues: 1,194
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# YEAH SO THIS IS PRETTY MUCH DEAD, DO YOURSELF A FAVOR AND SWITCH TO [tiny-slider](https://github.com/ganlanyuan/tiny-slider)
--------
--------
--------
# Owl Carousel 2
Touch enabled [jQuery](https://jquery.com/) plugin that lets you create a beautiful, responsive carousel slider. **To get started, check out https://owlcarousel2.github.io/OwlCarousel2/.**
**Notice:** The old Owl Carousel site (owlgraphic [dot] com) is no longer in use. Please delete all references to this in bookmarks and your own products' documentation as it's being used for malicious purposes.
## Quick start
### Install
This package can be installed with:
- [npm](https://www.npmjs.com/package/owl.carousel): `npm install --save owl.carousel` or `yarn add owl.carousel jquery`
- [bower](http://bower.io/search/?q=owl.carousel): `bower install --save owl.carousel`
Or download the [latest release](https://github.com/OwlCarousel2/OwlCarousel2/releases).
### Load
#### Webpack
Add jQuery via the "webpack.ProvidePlugin" to your webpack configuration:
const webpack = require('webpack');
//...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
],
//...
Load the required stylesheet and JS:
```js
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';
```
#### Static HTML
Put the required stylesheet at the [top](https://developer.yahoo.com/performance/rules.html#css_top) of your markup:
```html
```
```html
```
**NOTE:** If you want to use the default navigation styles, you will also need to include `owl.theme.default.css`.
Put the script at the [bottom](https://developer.yahoo.com/performance/rules.html#js_bottom) of your markup right after jQuery:
```html
```
```html
```
### Usage
Wrap your items (`div`, `a`, `img`, `span`, `li` etc.) with a container element (`div`, `ul` etc.). Only the class `owl-carousel` is mandatory to apply proper styles:
```html
Your Content
Your Content
Your Content
Your Content
Your Content
Your Content
Your Content
```
**NOTE:** The `owl-theme` class is optional, but without it, you will need to style navigation features on your own.
Call the [plugin](https://learn.jquery.com/plugins/) function and your carousel is ready.
```javascript
$(document).ready(function(){
$('.owl-carousel').owlCarousel();
});
```
## Documentation
The documentation, included in this repo in the root directory, is built with [Assemble](http://assemble.io/) and publicly available at https://owlcarousel2.github.io/OwlCarousel2/. The documentation may also be run locally.
## Building
This package comes with [Grunt](http://gruntjs.com/) and [Bower](http://bower.io/). The following tasks are available:
* `default` compiles the CSS and JS into `/dist` and builds the doc.
* `dist` compiles the CSS and JS into `/dist` only.
* `watch` watches source files and builds them automatically whenever you save.
* `test` runs [JSHint](http://www.jshint.com/) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/).
To define which plugins are build into the distribution just edit `/_config.json` to fit your needs.
## Contributing
Please read [CONTRIBUTING.md](CONTRIBUTING.md).
## Roadmap
Please make sure to check out our [Roadmap Discussion](https://github.com/OwlCarousel2/OwlCarousel2/issues/1756).
## License
The code and the documentation are released under the [MIT License](LICENSE).