官网地址: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的更多相关文章

  1. 强大实用的jQuery幻灯片插件Owl Carousel

    演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...

  2. jQuery幻灯片插件Owl Carousel

    简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON ...

  3. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  4. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  5. lightslider-支持移动触摸的轻量级jQuery幻灯片插件

    插件简介 lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特 ...

  6. Prezento – 轻量、简单的 jQuery 幻灯片插件

    Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...

  7. 12款jQuery幻灯片插件和幻灯片特效教程

    jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...

  8. bootstrap插件学习-bootstrap.carousel.js

    先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = { ...

  9. jQuery幻灯片插件autoPic

    原文地址:Jquery自定义幻灯片插件 插件效果图: 演示地址:autoPic项目地址:autoPic 欢迎批评指正!

随机推荐

  1. [Nginx] – 性能优化 – 配置文件优化

    Nginx基本安全优化 1.调整参数隐藏Nginx版本号信息     一般来说,软件的漏洞都和版本有关,因此我们应尽量隐藏或清除Web服务队访问的用户显示各类敏感信息(例如:Web软件名称及版本号等信 ...

  2. 批处理 ------ @、ECHO OFF、ECHO ON 的使用

    1.在批处理文件中,如果命令前加@,表示这条命令不打印出来,只把结果打印出来,即@是关闭命令本身的回显 2.::在批处理中表示注释某一行 3.ECHO ON表示接下来的命令中(不包括本命令),执行命令 ...

  3. go map数据结构

    map数据结构 key-value的数据结构,又叫字典或关联数组 声明: var map1 map[keytype]valuetype var a map[string]string var a ma ...

  4. Spark进阶之路-Spark HA配置

    Spark进阶之路-Spark HA配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 集群部署完了,但是有一个很大的问题,那就是Master节点存在单点故障,要解决此问题,就要借 ...

  5. IoC之Ninject

    一.Ninject安装 Ninject是一个轻量级的开源的DI容器,可以通过Nuget直接安装: 二.Ninject的简单使用 模型代码: //计算器接口 public interface ICalc ...

  6. Hibernate_day02

    一.今天内容 1 实体类编写规则 2 hibernate主键生成策略 (1)native (2)uuid 3 实体类操作 (1)crud操作 (2)实体类对象状态 4 hibernate的一级缓存 5 ...

  7. DotNetBar ButtonX添加下拉面板

    1. 2.在窗口上放一个控件 Control选择这个控件,即可,如果想让textBox下拉面板,需要使用textBoxDropDown,而不是textBoxX,DotNetBar的命名很奇怪.

  8. u-boot移植(四)---修改前工作:代码流程分析3---代码重定位

    一.重定位 1.以前版本的重定位 2.新版本 我们的程序不只涉及一个变量和函数,我们若想访问程序里面的地址,则必须使用SDRAM处的新地址,即我们的程序里面的变量和函数必须修改地址.我们要修改地址,则 ...

  9. $Miller Rabin$总结

    \(Miller Rabin\)总结: 这是一个很高效的判断质数的方法,可以在用\(O(logn)\) 的复杂度快速判断一个数是否是质数.它运用了费马小定理和二次探测定理这两个筛质数效率极高的方法. ...

  10. 【Gradle】Gradle环境配置

    Windows环境 下载 作者下载的是gradle-4.1-all.zip,下载地址:http://services.gradle.org/distributions 环境配置 GRADLE_HOME ...