# 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
<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+CSS+js 12页
共202个文件
jpg:102个
css:21个
js:14个
5星 · 超过95%的资源 需积分: 5 5 下载量 57 浏览量
2023-05-19
18:39:28
上传
评论 1
收藏 35.27MB ZIP 举报
温馨提示
主题:玉林旅游、旅游主题网页 使用技术:html+css+js 页面数量:12页 易修改、易通过、质量高、日期新鲜。 可修改成其他网页主题 【演示视频地址】 https://www.bilibili.com/video/BV1fg4y1s7Hs/?spm_id_from=333.999.0.0&vd_source=7104c1e8521ef6bc98094cb6c9efef43
资源推荐
资源详情
资源评论
收起资源包目录
计算机毕设:玉林旅游-旅游主题网页网站HTML+CSS+js 12页 (202个子文件)
bootstrap.css 194KB
bootstrap.min.css 157KB
remixicon.css 108KB
icofont.min.css 90KB
boxicons.css 75KB
bootstrap-grid.css 66KB
boxicons.min.css 60KB
bootstrap-grid.min.css 50KB
style.css 21KB
venobox.css 20KB
venobox.min.css 18KB
animations.css 7KB
owl.carousel.css 5KB
bootstrap-reboot.css 5KB
bootstrap-reboot.min.css 4KB
owl.carousel.min.css 3KB
owl.theme.default.css 1KB
owl.theme.green.css 1KB
owl.theme.green.min.css 1013B
owl.theme.default.min.css 1013B
transformations.css 653B
remixicon.eot 394KB
boxicons.eot 257KB
icomoon.eot 4KB
641.gif 9.41MB
640.gif 6.87MB
ajax-loader.gif 3KB
.gitignore 176B
food.html 25KB
news_05.html 21KB
news_02.html 15KB
history.html 15KB
news_03.html 14KB
regist.html 13KB
areas.html 13KB
travel.html 12KB
index.html 11KB
news_04.html 11KB
login.html 10KB
news_01.html 9KB
favicon .ico 9KB
MyHome.iml 336B
images_3.jpg 911KB
foods_4.jpg 580KB
bg-banner4.jpg 500KB
bg-banner1.jpg 498KB
bg-banner3.jpg 494KB
bg-banner2.jpg 486KB
banner_2.jpg 446KB
foods_14.jpg 446KB
banner_4.jpg 408KB
foods_8.jpg 402KB
foods_2.jpg 381KB
bkfoods_1.jpg 375KB
bkfoods_2.jpg 365KB
desert_7.jpg 332KB
foods_10.jpg 309KB
desert_5.jpg 292KB
foods_1.jpg 281KB
images_2.jpg 256KB
label_4.jpg 231KB
moutain_5.jpg 185KB
banner_1.jpg 176KB
images_9.jpg 174KB
news3_pitures3.jpg 171KB
foods_3.jpg 170KB
foods_15.jpg 168KB
bkfoods_6.jpg 166KB
moutain_3.jpg 153KB
moutain_4.jpg 151KB
images_4.jpg 150KB
images_12.jpg 145KB
images_6.jpg 144KB
foods_9.jpg 141KB
foods_16.jpg 138KB
images_1.jpg 137KB
foods_11.jpg 136KB
images_3.jpg 136KB
images_6.jpg 135KB
news5_img2.jpg 134KB
images_11.jpg 133KB
images_1.jpg 130KB
fruits_5.jpg 129KB
images_10.jpg 127KB
banner_3.jpg 124KB
images_5.jpg 124KB
bkfoods_7.jpg 122KB
introduce.jpg 122KB
images_5.jpg 122KB
news3_pitures2.jpg 122KB
news5_img4.jpg 118KB
images_9.jpg 114KB
desert_1.jpg 114KB
bg-banner.jpg 114KB
news_01-img1.jpg 113KB
news5_img6.jpg 108KB
news3_pitures1.jpg 106KB
images_3.jpg 106KB
moutain_2.jpg 103KB
images_8.jpg 102KB
共 202 条
- 1
- 2
- 3
资源评论
- 泡泡SOHO2023-07-26网站加载速度快,用户体验良好,能够方便地浏览和查找信息。
- 宏馨2023-07-26页面的布局简洁明了,使用了合适的颜色和字体,让人一目了然。
- 禁忌的爱2023-07-26这个文件内容丰富,包含了玉林旅游相关的信息,非常贴合主题。
- 设计师马丁2023-07-26这个文件提供了丰富的功能,比如导航栏、搜索框等,让用户能够快速找到自己感兴趣的内容。
- 滚菩提哦呢2023-07-26前端代码规范,HTML、CSS、js的结构清晰,易于维护和修改。
星火源码
- 粉丝: 18
- 资源: 6
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功