详情页

Owl Carousel参数说明和使用

时间:2023年11月28日

编辑:佚名

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    [&#x27;next&#x27;,&#x27;prev&#x27;]    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     
相关文章
猜你需要