项目实训-中医药知识图谱4

OwlCarousel使用

Owl Carousel 可以让帮助创建漂亮的响应式旋转木马的jQuery插件，它支持移动触摸屏，功能十分强大。Owl的新特性有：

可以无限循环、项目可以居中显示、灵活的速度控制、多级别的padding设置、项目间可以设置Margin、使几乎所有的选项都具有响应能力、多种宽度设置、丰富的回调事件、RTL（从右向左移动）、视频支持、锚链接导航、合并项

文件结构

Owl Carousel 2的目录结构如下：

owlcarousel/

├── assets/

│   ├── owl.carousel.css

│   ├── owl.carousel.min.css

│   ├── owl.theme.default.css

│   ├── owl.theme.default.min.css

│   ├── owl.theme.green.css

│   ├── owl.theme.green.min.css

│   ├── owl.video.play.png

│   ├── owl.carousel.js

│   ├── owl.carousel.min.js

│   ├── LICENSE-MIT

       

插件依赖

Owl Carousel 2依赖于jQuery或Zepto。jQuery最低版本要求是1.8.3版本。

CSS文件：

在html头部中引入必要的css文件：

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">

<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

owl.theme.default.css文件时可选的。

JS文件

在页面的尾部添加owl.carousel.min.js文件：

<script src="jquery.min.js"></script>

<script src="owlcarousel/owl.carousel.min.js"></script>

HTML结构

Owl Carousel不需要设置复杂的html结构，只需要将内容<div>（当包裹在一个class为owl-carousel的<div>中即可。Class owl-carousel是在owl.carousel.css文件中定义的，改变它需要修改整个owl.carousel.css文件。