# 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).
没有合适的资源?快使用搜索试试~ 我知道了~
住宅家居装潢设计响应式网页模板-适配移动端-HTML源码.zip
共73个文件
js:17个
css:16个
jpg:15个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 23 浏览量
2024-03-27
09:02:46
上传
评论
收藏 3.43MB ZIP 举报
温馨提示
这份HTML网站源码具备出色的移动端适配能力,能够确保你的网站在各种尺寸的移动设备上都能完美呈现。无论是iOS还是Android系统,无论是竖屏还是横屏,这份源码都能自动调整布局,提供流畅、清晰的用户体验。 这份资源的专业性不仅体现在其高效的响应式设计上,还体现在其丰富的功能和易用性上。它支持多种流行的前端框架和库,如Bootstrap、jQuery等,使得开发过程更加高效、灵活。此外,它还提供了丰富的页面模板和组件,可以满足各种不同的业务需求。 使用这份HTML网站源码资源,你将获得一个专业、美观且易于维护的网站。不仅如此,它的高性能和优秀的搜索引擎优化(SEO)特性也将帮助你的网站在激烈的市场竞争中脱颖而出。总之,这份资源是打造成功网站的不二之选。
资源推荐
资源详情
资源评论
收起资源包目录
住宅家居装潢设计响应式网页模板-适配移动端-HTML源码.zip (73个子文件)
住宅家居装潢设计响应式网页模板-适配移动端-HTML源码
html
lib
superfish
hoverIntent.js 7KB
superfish.min.js 4KB
superfish.js 7KB
font-awesome
css
font-awesome.css 37KB
font-awesome.min.css 30KB
fonts
FontAwesome.otf 132KB
fontawesome-webfont.eot 162KB
fontawesome-webfont.woff 96KB
fontawesome-webfont.woff2 75KB
fontawesome-webfont.svg 434KB
fontawesome-webfont.ttf 162KB
sticky
sticky.js 10KB
bootstrap
js
bootstrap.min.js 48KB
bootstrap.bundle.min.js 66KB
css
bootstrap.min.css 141KB
bootstrap.css 174KB
owlcarousel
assets
owl.theme.green.min.css 1013B
owl.carousel.css 4KB
owl.video.play.png 5KB
owl.theme.default.css 1KB
ajax-loader.gif 3KB
owl.theme.green.css 1KB
owl.theme.default.min.css 1013B
owl.carousel.min.css 3KB
LICENSE 1KB
owl.carousel.min.js 43KB
owl.carousel.js 87KB
README.md 4KB
ionicons
css
ionicons.css 56KB
ionicons.min.css 50KB
fonts
ionicons.ttf 184KB
ionicons.eot 118KB
ionicons.svg 326KB
ionicons.woff 66KB
magnific-popup
magnific-popup.min.js 20KB
magnific-popup.css 7KB
magnific-popup.js 41KB
wow
wow.js 17KB
wow.min.js 8KB
animate
animate.css 25KB
animate.min.css 17KB
easing
easing.js 4KB
easing.min.js 2KB
jquery
jquery-migrate.min.js 7KB
jquery.min.js 85KB
js
main.js 5KB
img
apple-touch-icon.png 2KB
portfolio
2.jpg 66KB
6.jpg 80KB
1.jpg 96KB
5.jpg 77KB
8.jpg 126KB
3.jpg 82KB
7.jpg 75KB
4.jpg 99KB
team4.jpg 33KB
team3.jpg 45KB
about-img.png 389KB
clients
client-6.png 26KB
client-5.png 31KB
client-4.png 20KB
client-2.png 26KB
client-1.png 21KB
client-3.png 32KB
team2.jpg 46KB
intro-carousel
2.jpg 417KB
1.jpg 447KB
3.jpg 301KB
preloader.gif 46KB
team1.jpg 33KB
favicon.png 491B
css
style.css 23KB
index.html 28KB
contact
共 73 条
- 1
资源评论
DTcode7
- 粉丝: 3448
- 资源: 4068
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功