README

Owl Carousel 2

支持触控的 jQuery 插件，允许您创建一个美丽的、响应式的轮播滑动。 要开始使用，请访问 https://owlcarousel2.github.io/OwlCarousel2/。

注意：旧Owl Carousel网站（owlgraphic [点] com）不再使用。请删除所有书签和您自己的产品文档中对此的引用，因为它正在被用于恶意目的。

快速开始

安装

此包可以使用以下方式安装

npm: npm install --save owl.carousel 或 yarn add owl.carousel jquery
bower: bower install --save owl.carousel

或下载最新的发布版。

加载

Webpack

通过 "webpack.ProvidePlugin" 将jQuery添加到您的webpack配置中

const webpack = require('webpack');

//...
plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
],
//...

加载所需的样式表和JS

import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';

静态HTML

将所需的样式表放在您的标记的顶部

<link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />

<link rel="stylesheet" href="/bower_components/owl.carousel/dist/assets/owl.carousel.min.css" />

注意：如果您想使用默认的导航样式，您还需要包括 owl.theme.default.css。

将脚本放在您的标记的底部，紧接在jQuery之后

<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>

<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>

使用

将您的项目（div、a、img、span、li等）包裹在一个容器元素（div、ul等）中。只有类 owl-carousel 是必须的，以应用适当的样式

<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>

注意：类 owl-theme 是可选的，但如果没有它，您将需要自己为导航功能编写样式。

调用插件函数，您的轮播就准备好了。

$(document).ready(function(){
  $('.owl-carousel').owlCarousel();
});

文档

该文档包含在本存储库的根目录中，使用 Assemble 构建，并在 https://owlcarousel2.github.io/OwlCarousel2/ 公开提供。文档也可以在本地运行。

构建

此包包含 Grunt 和 Bower。以下任务可用

default 编译CSS和JS到 /dist 并构建文档。
dist 仅编译CSS和JS到 /dist。
watch 监视源文件，并在您保存时自动构建它们。
test 在 JSHint 和 QUnit 测试中运行无头测试 PhantomJS。

要定义构建到分发中的插件，请编辑 /_config.json 以满足您的需求。

贡献

请阅读 CONTRIBUTING.md。

路线图

请确保查看我们的路线图讨论。

许可协议

代码和文档在 MIT 许可协议下发布。

oneistbesser / owl-carousel

维护者

详细信息