Owl Carousel参数说明和使用

2022-08-15 zhangli 0 0 阅读需要2-5分钟

  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  

相关标签

相关文章

无相关信息
  • 鼠标hover后图片被黑色遮挡动画效果

    一个鼠标经过后,图片被黑色层遮挡并且放大的效果CSS

  • justify-content:space-between使用方法

    涵义justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

  • Owl Carousel参数说明和使用

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

  • CSS种::before和::after使用方法

    ::before和::after 是用来给元素添加额外内容的,因为只存在于作用元素内容的前后.在css中,::before和::after 是一个伪类元素,代表生成的内容元素,表示相应元素的可抽象样式的第一个子元素,即:所选元素的第一个子元素。

  • 行业门户网站的流量工作内容

    对于大型网站来说要满足功能需求,同时要想获取大量流量就是需要有栏目和内容来匹配关键字和用户需求,进而提升网站的流量,接下来我的行业网站开发列表。

  • 大型网站建设管理规范经验和好处分享

    在开发这个大型网站前端的时候就开始发现规划和标准的重要性,不然代码太乱了,利用率也不高,管理乱七八糟,更重要的是开发好一段时间,对代码熟悉度不高了,后面在调整就更痛苦了,所以自己在写这个代码的时候开始给自己做标准化的管理规范,好处就是方便,代码易懂,扩展方便,使用高效。

  • 2016 Google Adsense付款方式总结提现西联汇款经验分享

    第一次去Adsense取现,在之前也看了很多的网上攻略,如何取现,了解了Adsense西联汇款付款方式,怀着刚刚花了2天时间取来的第一笔adsense收入来分享下这段不简单的网赚之路。

  • google analysics分析,网站优化推广转化率分析工具

      章力强烈推荐google analysics分析工具,是你网站优化推广转化率分析工具不得不用的工具,除了国内常用的CNZZ,51la等常用统计的工具以外,其实我现在发现google analysics分析

  • 电子商务网站的跳出率

    什么是跳出率?首先我们来看看  跳出,顾名思义就是指用户进入网站又退出的意思,跳出率就是指用户进入你的网站仅浏览了一个页面就离开,所占这个页面总访问次数的百分比。跳出次

  • 卓越excms发展建议

    偶然间了解到了卓越excms,下载了测试下,还不错,作为一个新的cms个人觉得在基础框架方面都是非常不错的,比起国内某些老牌CMS强很多,当然ecms还需要很多需要完善的地方,以下是给excms的一点建议:

  • google adsense广告不显示问题和解决方法

    在11月某天网站google adsense广告突然无法显示广告,查看adsense后台,显示没有数据,查收邮箱没有收到账号被K的邮件,并且我也没有作弊,对网站也没有动过,检查了一系列相关,包括代码问题,网站JS都没有问题

  • 网站运营是做内容为主,还是推广为主

    做网站,网站内容和网站推广是最重要的两个因素,探讨谁比较重要,其实只是想提醒大家,根据自己的网站推广方案做出选择,达到网站的目的就行!

  • 网站运营是做内容为主,还是推广为主

    做网站,网站内容和网站推广是最重要的两个因素,探讨谁比较重要,其实只是想提醒大家,根据自己的网站推广方案做出选择,达到网站的目的就行!

  • 如何建一个营销型企业网站

    网站建设的内容包括网页设计、网页制作、虚拟主机建设、网站程序开发、网站推广等等。

  • 卓越excms发展建议

    偶然间了解到了卓越excms,下载了测试下,还不错,作为一个新的cms个人觉得在基础框架方面都是非常不错的,比起国内某些老牌CMS强很多,当然ecms还需要很多需要完善的地方,以下是给excms的一点建议:

  • 大型网站建设管理规范经验和好处分享

    在开发这个大型网站前端的时候就开始发现规划和标准的重要性,不然代码太乱了,利用率也不高,管理乱七八糟,更重要的是开发好一段时间,对代码熟悉度不高了,后面在调整就更痛苦了,所以自己在写这个代码的时候开始给自己做标准化的管理规范,好处就是方便,代码易懂,扩展方便,使用高效。

  • 电子商务网站的跳出率

    什么是跳出率?首先我们来看看  跳出,顾名思义就是指用户进入网站又退出的意思,跳出率就是指用户进入你的网站仅浏览了一个页面就离开,所占这个页面总访问次数的百分比。跳出次

  • 传统企业与电子商务结合的问答

      关于传统企业与电子商务的问答问:电子商务已经成为趋势,不是是否做电子商务,而是什么时间做、投入多少去做,你认为企业选择在什么时间做比较合适,而应该如何布局实施?

  • Owl Carousel使用代码

    Owl Carousel自动适应页面宽度,在手机端显示的是每次1个图标,在PC端显示每次6个图标。自动从右边向左边滚动。

  • 老鹰主机黑五和阿里云VPS双11采购记说说他们的优劣势

      今年的双11和黑五过的真不一样,不是买吃的穿的用的,而是利用这2个大的促销时间点去采购和网站和SEO相关的主机和VPS,全面准备大量的资源来为接下来的网站大战一场准备粮草

  • justify-content:space-between使用方法

    涵义justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

  • 大章力网站改版 换网站系统换全站URL

    大章力这个网站断断续续的从建站到现在有快10年了,中间有更改域名,有很长一段时间没有更新,有大范围数据丢失,而这一次将博客系统从wordpress转到了帝国cms,因为本人对wordpress的不熟悉,无法灵活的开发主题,也无法灵活的调用数据,然后之前使用的主题从网上找的,阿里云系统多次提示主题模板有漏洞,为了长期的发展需要,所以下定决定还是迁移到最熟悉的帝国cms。

  • 网站运营是做内容为主,还是推广为主

    做网站,网站内容和网站推广是最重要的两个因素,探讨谁比较重要,其实只是想提醒大家,根据自己的网站推广方案做出选择,达到网站的目的就行!

  • 行业门户网站的流量工作内容

    对于大型网站来说要满足功能需求,同时要想获取大量流量就是需要有栏目和内容来匹配关键字和用户需求,进而提升网站的流量,接下来我的行业网站开发列表。

TOP