Owl Carousel是个人比较喜欢使用的一个强大、实用但小巧的 jQuery 幻灯片插件,它具有方便,兼容性好,特别是向我所有网站都是使用 bootstrap的自适应网站,就需要再使用一些幻灯片或者特效时候进行PC和移动端的全面兼容,而这个就满足了我的需求,由于经常使用,单每次都要隔一段时间,基本就把上一次使用熟练的参数和使用方法都忘记光了,所以做一份这样的参数记录表帮助自己能更好的记录和使用。
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