1、首先需要调用默认的Owl Carousel的JS和CSS
<link href="https://cdn.staticfile.org/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
这里有一个注意事项和使用技巧，首先把默认的Owl Carousel的.css文件放在前面，再自己写的网站样式.css放在它后面，这样在后面覆盖默认样式的时候更好覆盖，其次默认的Owl Carousel的JS文件可以放在网站最后，不需要放在网站代码前面，提升网站的打开速度。
有了上面的基础代码后，下面就是加载 Owl Carousel
<script>
$(document).ready(function() {
$('#client').owlCarousel({
items: 1,
loop: true,
margin: 0,
navText: ['<i class="fa fa-arrow-left"></i>', '<i class="fa fa-arrow-right"></i>'],
callbacks: true,
dots:false,
nav:true,
mouseDrag:true,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true,
});
})
</script>
上面红色部分代码是作用的哪个ID，在一个页面中有多个调用Owl Carousel需要通过不同的id来识别，黄色部分代码是各种属性值，也就是你要起到什么作用，就靠这些属性代码来设置。
参数 类型 默认值 说明
items 整数 3 幻灯片每页可见个数
margin 0 每个幻灯片margin-right(px)
loop 布尔 false 是否循环播放
center 布尔 false 剧中对齐
mouseDrag 布尔 true 鼠标拖曳
touchDrag 布尔 true 触摸拖曳
pullDrag 布尔 true 拉到边缘
freeDrag 布尔 true 项目拖到边缘
stagePadding 0
merge 布尔 false 合并项目。正在项中查找数据合并=“｛number｝”
mergeFit
autoWidth 布尔 false 设置非网格内容。尝试在div上使用宽度样式
startPosition 0
URLhashListener 0
nav 布尔 false 显示prev/next按钮
rewind 0
navText Array ['next','prev'] prev/next按钮样式自定义，可以使用HTML
navElement 0
slideBy 0
slideTransition 0
dots 布尔 true 显示点点的导航
dotsEach 0
dotsData 0
lazyLoad 0
lazyLoadEager 0
autoplay 0
autoplayTimeout 0
autoplayHoverPause 0
smartSpeed 0
fluidSpeed 0
autoplaySpeed 0
navSpeed 0
dotsSpeed 0
dragEndSpeed 0
callbacks 0
responsive 0
responsiveRefreshRate 0
responsiveBaseElement 0
video 0
videoHeight 0
videoWidth 0
animateOut 0
animateIn 0
fallbackEasing 0
info 0
nestedItemSelector 0
itemElement 0
stageElement 0
navContainer 0
dotsContainer 0
checkVisible 0
