jquery幻灯片插件之owl.carousel.js
官网地址:http://owlcarousel2.github.io/OwlCarousel2/
这个插件兼容各种浏览器,以及移动端
使用方法:
1、下载文件,解压以后,把dist里面的文件放到项目中
2、引入jquery文件,必须是1.8以上的
3、页面引入的文件:
<link rel="stylesheet" href="./js/vendor/OwlCarousel2-2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="js/vendor/OwlCarousel2-2.2.1/assets/owl.theme.default.min.css">
<script src="js/vendor/jquery-3.1.1.js"></script>
<script src="js/vendor/OwlCarousel2-2.2.1/owl.carousel.min.js"></script>
4、页面代码:
<div class="owl-carousel owl-theme">
<div class="item">
<picture>
<source srcset="img/ad001-l.png" media="(min-width:50em)">
<source srcset="img/ad001-m.png" media="(min-width:30em)">
<img src="img/ad001.png" alt="2015年度报告">
</picture>
</div>
<div class="item">
<picture>
<source srcset="img/ad002-l.png" media="(min-width: 50em)">
<source srcset="img/ad002-m.png" media="(min-width: 30em)">
<img srcset="img/ad002.png" alt="新年红包">
</picture>
</div>
<div class="item">
<picture>
<source srcset="img/ad003-l.png" media="(min-width: 50em)">
<source srcset="img/ad003-m.png" media="(min-width: 30em)">
<img srcset="img/ad003.png" alt="新手秘籍">
</picture>
</div>
</div>
jquery幻灯片插件之owl.carousel.js的更多相关文章
- 强大实用的jQuery幻灯片插件Owl Carousel
演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...
- jQuery幻灯片插件Owl Carousel
简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON ...
- SlidesJS - 老牌的响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...
- Skippr – 轻量、快速的 jQuery 幻灯片插件
Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...
- lightslider-支持移动触摸的轻量级jQuery幻灯片插件
插件简介 lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特 ...
- Prezento – 轻量、简单的 jQuery 幻灯片插件
Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...
- 12款jQuery幻灯片插件和幻灯片特效教程
jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...
- bootstrap插件学习-bootstrap.carousel.js
先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = { ...
- jQuery幻灯片插件autoPic
原文地址:Jquery自定义幻灯片插件 插件效果图: 演示地址:autoPic项目地址:autoPic 欢迎批评指正!
随机推荐
- C语言实现KMP模式匹配算法
next: /*! * Description: * author scictor <scictor@gmail.com> * date 2018/7/4 */ #include < ...
- mysql5.6下载及安装(超级详细)
经过本人的实验,验证这些东西都是OK的 博客原文地址:http://www.cnblogs.com/Percy_Lee/p/5282187.html
- my soft
s 版本 61.0.3163.100(正式版本) (64 位) chrome://settings/content/flash 允许网站运行 Flash,多开闭几次,即可. soft / ul ...
- 函数和常用模块【day06】:pickle模块(十二)
本节内容 1.dumps序列化和loads反序列化 2.dump序列化和load反序列化 3.序列函数 1.dumps序列化和loads反序列化 dumps()序列化 1 2 3 4 5 6 7 8 ...
- 学习windows编程 day2 之滚动条使用
相关函数: setscrollrange,setscrollpos,getscrollrange,getscrollpos 使用滚动条时我们需要进行的操作: 1.初始化滚动条范围和位置 在窗口创建时W ...
- java compareTo() 用法注意点
转自:http://www.2cto.com/kf/201305/210466.html compareTo就是比较两个值,如果前者大于后者,返回1,等于返回0,小于返回-1,我下面给出了例子,由于比 ...
- 宕机不等于关机,阴魂不散的vm
今天早上刚到公司,就发现研发环境的机器连不上了. 公司研发环境的部署比较简单,物理机上装VMware Esxi 6 ,然后在esxi上装虚机. 检查发现:esxi ping不通,客户端也连不上:物理机 ...
- prompt更改MySQL登陆后的提示符
临时生效 mysql> prompt \u@standby \r:\m:\s > PROMPT set to '\u@standby \r:\m:\s >' root@standby ...
- listcontrolc插入列时,出现断言错误
原因:窗口还未创建,就对listcontrol进行了操作 解决方案:在初始化函数中 添加CDialogEx::OnInitDialog();
- C++中路径的处理方法(string)
string 类提供字符串处理函数,利用这些函数,程序员可以在字符串内查找字符,提取连续字符序列(称为子串),以及在字符串中删除和添加.我们将介绍一些主要函数. 1.函数find_first_of() ...