# 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/.**
## 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
<link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
```
```html
<link rel="stylesheet" href="/bower_components/owl.carousel/dist/assets/owl.carousel.min.css" />
```
**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
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
```
```html
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
```
### 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
<div class="owl-carousel owl-theme">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
```
**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).
基于ssm+mysql在线租房系统源码数据库.zip
版权申诉
193 浏览量
2023-09-01
16:31:08
上传
评论
收藏 95.59MB ZIP 举报
栾还是恋
- 粉丝: 29
- 资源: 4996
最新资源
- 以简单、易用、高性能为目标、开源的时序数据库,支持Linux及Windows, Time Series Database.zip
- python-leetcode面试题解之第198题打家劫舍-题解.zip
- python-leetcode面试题解之第191题位1的个数-题解.zip
- python-leetcode面试题解之第186题反转字符串中的单词II-题解.zip
- 一个基于python的web后端高性能开发框架,下载可用
- python-leetcode面试题解之第179题最大数-题解.zip
- python-leetcode面试题解之第170题两数之和III数据结构设计-题解.zip
- python-leetcode面试题解之第168题Excel表列名称-题解.zip
- python-leetcode面试题解之第167题两数之和II输入有序数组-题解.zip
- python-leetcode面试题解之第166题分数到小数-题解.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈