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  

相关标签

相关文章

无相关信息
  • 网站用户提交姓名和电话号码表单验证JS

    网站一个用户留信息的表单,功能是表单有2个字段一个是姓名,一个是电话号码,用户提交表单后,JS验证姓名字段是否为空,电话号码字段验证填写的是不是电话号码格式。

  • 网站建设客户需求资料提供清单

    我们为客户提供网站建设服务,下面罗列了需要客户提供给我们的资料,这样就可以快速的搭建网站了。

  • 鼠标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的一点建议:

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

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

  • 电子商务网站的跳出率

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

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

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

  • 网站空间选购

      要选购个空间,买国外网站空间的的确确是慢了点,但好处是不言而喻的,价格超级便宜,稳定也好不错了,空间也大,所以考虑选购个国内的空间,国内其他没什么好处就是快,其他么稳定性,价

  • 大杭州旅游网改版调整

    大杭州旅游网(原杭州旅游网)经过2年的发展,之前的功能已经不能满足网络发展,特此网站进行一次大规模的改版。1本次改版首先对网站的界面模版进行了调整,采用更加大气的门户性质模

  • Owl Carousel参数说明和使用

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

  • 2012章力博客全面改版

      章力博客改版了,这次改版不但是博客整个模板测底改版,整个博客的内容,方向也将做大的调整,也代表章力新的方向和新的工作模式内容!这次改版后博客将围绕淘宝运营推广为主,不

  • 我的adsense账户被盗申述信

    我相信你们能理解一个GOOGLE ADSENSE 客户的心情,特别是一个账户即将到达100美金,第一次即将获得100美金的小站长,特别是为此还努力了3年的小站长。希望你们能帮我找回这个账户。

  • 百度联盟账号被封的分析

    昨天国庆后打开百度联盟账号,一个大大的悲剧就发生了,百度联盟账号被封了,然后在后台的消息里看了下,发现了下面的有一个信息: 敬的联盟会员,您好:经核查,我们发现您联盟帐号中的合

TOP