jQuery幻灯片插件Owl Carousel之itemsDesktop的使用

OwlCarousel插件轮播图项目实战与详解 OwlCarousel是一个流行的jQuery插件,用于创建响应式和触摸友好式的滑动轮播。它广泛用于展示图片、图片画廊、内容幻灯片等。由于其灵活性和易用性,OwlCarousel成为网页设计师和开发者的首选工具。OwlCarousel的核心组件包括:轮播容器():作为轮播的父容器,用于包裹所有的.item元素。轮播项(.item):定义轮播中每张图片或内容块的布局。导航按钮():包括前进和后退按钮,用于用户手动操作轮播。分页器(.owl-dots。 阅读详情

最近在用H5+CSS+jQuery开发IOS项目,新手零基础琢磨这东西真心蛋疼,偶尔同事发来一段Eclipse里的XML代码,那种一目了然的整齐的感觉,让人怀念地热泪盈眶……
废话不多说,进入正题
我们一直想要一种类似于QQ相册一样浏览图片的功能,查了以后发现Owl Carousel可以实现,效果如下:
在浏览器屏幕宽度较大的情况下的效果
而且拖动屏幕大小还有自适应的问题,这个让本屌觉得超级亢奋
但是问题来了,你发现随着屏幕的缩小,它并不是所有图片带着滑动框一起缩小,而是缩到一定程度了少一张,再缩下去再少一张,直到变成手机屏幕了只剩下一张……(本屌刚刚燃烧起来的火热的心啊,瞬间被撕地一片一片的……)
做了很多方面的努力,包括单个图片调整大小,DIV层调整等,都以失败告终
后来还是以为资深的老码农指点下,才明白其中的奥义:
itemsDesktop
就是这货!
先来看下说明

参数 类型 默认值 说明

items 整数 5 幻灯片每页可见个数
itemsDesktop 数组 [1199,4] 设置浏览器宽度和幻灯片可见个数,格式为[X,Y],X 为浏览器宽度,Y 为可见数,如[1199,4]就是如果浏览器宽度 小于1199,每页显示 4 张,此参数主要用于响应式设计。也可以使用 false
itemsDesktopSmall 数组 [979,3] 同上
itemsTablet 数组 [768,2] 同上
itemsTabletSmall 数组 false 同上,默认为 false
itemsMobile 数组 [479,1] 同上

明白了,当我们的页面缩小的时候,在默认情况下图片数会随之减少,因此有了上面那么蛋疼的效果
所以如果我们要在手机屏幕的大小上也实现一排可爱的小图片滑动,就需要把items值保持不变
代码如下:

$(function(){
    $('#owl-demo').owlCarousel({
        navigation: true,
        navigationText: ["上一个","下一个"]
        items : 3, 
        itemsDesktop : [1000,3], 
        itemsDesktopSmall : [900,3], 
        itemsTablet: [600,3], 
        itemsMobile : [479,3]   
    });
});
TableItem标签页控件的使用 TableItem标签页控件的使用,通过标签题头来查看标签页,以及自定义标题,及启动时显示哪项 立即下载

相关推荐

jQuery幻灯片插件owlcarousel参数说明中文文档

jQuery幻灯片插件owlcarousel是一个小巧强大兼容性强的幻灯片插件,兼容IE6以上所有浏览器,本文主要介绍了字的使用方法与中文参数与API说明

【Jquery插件集合】轮播、时间处理插件

【Jquery插件集合】轮播、时间处理插件

阿晨的博客 4688

保姆级教程:用Multisim仿真快速上手二极管、MOSFET和IGBT的开关特性

本文提供了一份详细的Multisim仿真教程,帮助读者快速掌握二极管、MOSFET和IGBT的开关特性。通过搭建实验电路、观察波形特征和参数影响分析,深入解析了反向恢复过程、米勒平台现象和拖尾电流效应。适合电力电子初学者和工程师通过仿真建立直观理解,提升电路设计能力。

weixin_29290863的博客 498

关于banner 轮播图的总结记录 js

本文主要记录在工作中常用的做轮播图的方法,以插件为主。

sinat_38546399的博客 1012

2022网安保研经验帖

2022网安保研经验

fumingxiaoshen的博客 4894

在 Coze 平台工作流开发中,使用图生视频大模型需要时间比较长比如5分钟,如何解决工作流运行超时的问题以及等在视频生成以后再向下走

在 Coze 平台工作流开发中,使用图生视频大模型需要时间比较长比如5分钟,如何解决工作流运行超时的问题以及等在视频生成以后再向下走 同步的比较简单,直接在coze 工作流里面就可以搞定了,也不用写代码之类的

AI懒虫 2357

owlCarousel

简介 Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器支持响应式支持 CSS3 过度支持触摸事件支持 JSON 及自定义 JSON 格式支持进度条支持自定义事件支持延迟加载支持自适应高度…… Owl Carousel 提供了众多的参数、回调函数及自定义事件(具体请往下浏览),所以它几乎可以满足你的所有要求。 兼容

u012171227的专栏 2771

高德地图API如何使用

通过以上步骤,您可以成功接入并使用高德地图API来为您的应用添加丰富的地图功能。

QQ_778132974的博客 4784

jQuery幻灯片插件OWL Carousel

简介 Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持CSS3过度 支持触摸事件 支持JSON及自定义JSON格式 支持进度条 支持自定义事件 支持延迟加载 支持自适应高度 …… Owl Carousel 提供了众多的参数、回调函数及自定义事件(具体请往下浏览),所以它...

anshuyou4769的博客 504

SAP GR(Group Reporting)配置篇(一)

GUI组报表的SAP S4HANA1.1全局参数1.1.1 检查全球系统设置菜单路径组报表的SAP S4HANA>合并的全局设置>检查全球系统设置事务代码CXB3说 明定义好分类账、版本、合并科目表后,重新设置。1.2主数据1.2.1定义合并分类账菜单路径组报表的SAP S4HANA>主数据>定义合并分类账事务代码CXL2说 明复制的Y1合并分类账,集团货币为CNY。此功能对分类账进行设置,应用到集团货币分类。

weixin_43853754的博客 1700

【Godot】【工程】中文字体与多语言(缺字/体积/打包:一次性配置到位)

本文介绍了Godot游戏开发中的中文字体配置与多语言支持方案。主要内容包括:1)中文字体的全局与局部设置;2)使用子集化技术减小字体体积;3)多语言资源管理及翻译系统实现;4)语言切换机制与控件刷新方法;5)字体回退策略优化显示效果;6)打包优化建议。文章提供了从字体导入到多语言实现的完整解决方案,帮助开发者系统性解决中文显示和多语言支持问题,同时优化资源体积和性能表现。配套案例可供学习参考。

技术小甜甜:传播可落地技术,帮助个人和企业降低解决真实场景问题的成本 598

强大的jQuery焦点图插件Owl Carousel + 响应式图片(案例解析)

GitHub地址:https://github.com/OwlCarousel2/OwlCarousel2 在各式各样的网站中,都能看到焦点图插件的身影。 一个好的焦点图插件必须满足以下特点:1. 支持不同数量的图片 2. 支持响应式布局 3. 具有良好的兼容性 Owl Carousel完全满足这几个特点。Owl Carousel是非常强大的jQuery焦点图插件,这个焦点图插件功能众多,高...

qq_32614411的博客 3281

在 SAP BTP 中为 SAP AI Core 创建 Service Instance 和 Service Key 的完整实战指南

摘要:本文详细介绍了在SAP BTP上创建AI Core服务实例和密钥的关键步骤,这是实现ABAP系统与Gen AI大语言模型集成的核心技术环节。文章通过一个制造业财务问答场景的案例,系统梳理了从前提条件准备、架构理解到具体操作的全过程,重点解析了service instance创建、X.509证书配置等关键节点。特别强调了Extended计划选择、证书格式等易错点,为ABAP开发人员实现Gen AI场景提供了实用指南。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 272

Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动

Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器 - 凤凰涅磐360yi 时间 2013-08-22 11:28:00  博客园精华区 原文  http://www.cnblogs.com/suchso/p/jquery-small-plug-OWLCarousel-touch-mobilebrowser.html 主题 jQuery HTML

zhh_Tony 3349

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

多功能图片滚动插件owl.carousel

owl.carousel是一款多功能图片滚动插件,它本身具备了八种类型的旋转木马图片滚动功能,前端开发者们可以根据自身需求定制出多种类型的旋转效 果,实用性和可定制性都非常强,兼容所有主流浏览器,如果你正在寻找旋转木马的图片滚动插件,使用owl.carousel是再适合不过的了!     演示地址     下载地址 ...

iteye_16836的博客 489

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

OwlCarousel使用

参考:http://www.jq22.com/jquery-info6010 使用方法 Owl Carousel 2是上一版Owl Carousel的升级版本。Owl Carousel 2可以让你创建漂亮的响应式旋转木马的jQuery插件,它支持移动触摸屏,功能十分强大。Owl的新特性有: 可以无限循环 项目可以居中显示 灵活的速度控制 多级别的paddin...

sz_09的博客 1万+

owl carousel2滚动到指定位置遇到的问题记录

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_33881041的博客 1026

html5下拉幻灯片插件,强大实用的jQuery幻灯片插件Owl Carousel

强大实用的jQuery幻灯片插件Owl Carousel分类:代码日期:2017-04-11点击(199,155)下载(1)来源:未知收藏简介Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有一下特点:兼容所有浏览器支持响应式支持 CSS3 过度支持触摸事件支持 JSON 及自定义 JSON 格式支持进度条支持自定义事件支持延迟加载支持自适应高度……Owl Car...

weixin_31983133的博客 441

jQuery列表拖拽轮播插件owl-carousel

jquery和css3卡片列表拖拽轮播切换布局。该布局使用owl-carousel进行布局,通过css制作卡片样式,组成炫酷的卡片轮播特效。

ICode联盟 491

新闻分页循环图片左右滚动代码html,jQuery响应式触屏图片左右滚动代码owl.carousel...

这是一款基于owl.carousel.js和jquery-1.9.1.min.js实现的响应式左右滚动代码,自适应屏幕大小,响应式设计,完美兼容PC端和手机移动设备,支持触屏滑动效果,支持点击按钮切换,有“上一张、下一张”按钮链接,可设置一屏显示的图片个数,兼容各大主流浏览器!1、引入文件2、HTML123456783、JavaScript$(function(){$('#owl-example'...

weixin_42472941的博客 932

jQuery自适应栅格式左右滑动轮播卡片式table

jQuery+CSS3响应式图文卡片布局轮播切换特效

808

html图片卡片轮播代码,jQuery css3响应式图文卡片滚动轮播特效

使用方法:1、head引入css文件2、head引入js文件3、body引入HTML代码Latest News PostLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagit...

weixin_36397146的博客 429

Jquery轻量级幻灯插件-OWL Carousel--支持触屏的移动浏览器

今天看到一个插件OWL Carousel幻灯片。一、首先是说明一下OWL Carousel幻灯的主要功能。1、Jquery插件,品牌好,哈哈。基于Jquery开发,比较稳定 2、文件小。Css+js不到10k,压缩之后。 3、支持触屏。经过测试,在android手机的主流浏览器:QQ、百度、UC、微信内置浏览器等支持 4、响应式设计。支持不用屏幕、触屏。支持div、图片等。支持全部显示、单个显示 5

zaichuanguanshui的专栏 8061

js 幻灯片插件,owlCarousel

还算好用,就是图片上不好加链接。看了几十分钟没找到项目中链接,只好加在了文字上。或者在外框上加,那样链接内容又要另考虑与图片同步问题了。官网:http://www.owlgraphic.com/owlcarousel/ Github地址:https://github.com/OwlCarousel2/OwlCarousel2 中文文档:http://www.htmleaf.com/jQuery/S...

程序员写的技术 FAQ 和杂文 848
上一篇: 页面自动跳转
下一篇: 未能将网站配置为使用ASP.NET4.X 解决方法
横刀天笑
博客等级 码龄11年 4粉丝 5原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值