分享好友教程首页教程搜索频道列表

jquery响应式全屏幻灯片插件Glide.js

2018-09-02 10:4816290
+关注32
核心提示:Glide.js是一款响应式和对移动设备友好的jquery插件,它是基于CSS3的动画转场,同...

Glide.js是一款响应式和对移动设备友好的jquery插件,它是基于CSS3的动画转场,同时也向后兼容旧版本的浏览器。Glide简单,轻量级和速度快等优点,用来做幻灯片滑块是最好不过了。

jquery实例:Glide使用方法

引入核心文件

<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery.glide.js"></script>
写入html

<div class="slider">
<ul class="slider__wrapper">
<li class="slider__item"></li>
<li class="slider__item"></li>
<li class="slider__item"></li>
</ul>
</div>
初始化插件

//基本初始化,使用默认值
$('.slider').glide();

//带参数初始化
$('.slider').glide({
autoplay: 5000,
arrows: 'body',
navigation: 'body'
});

选项参数

名称 默认值 类型 描述
autoplay 4000 int/bool 是否自动播放
hoverpause true bool 鼠标悬浮暂停播放
circular true bool 循环播放
animationDuration 500 int 动画时间,单位毫秒
animationTimingFunc cubic-bezier(0.165, 0.840, 0.440, 1.000) string 动画方式函数
arrows true bool/string 显示/隐藏/ 箭头。也可通过样式类来添加html标签
arrowsWrapperClass slider__arrows string 箭头的样式类
arrowMainClass slider__arrows-item string 两个箭头的主样式类
arrowRightClass slider__arrows-item–right string 右箭头样式类
arrowLeftClass slider__arrows-item–left string 左箭头样式类
arrowRightText next string 右箭头文本
arrowLeftText prev string 左箭头文本
navigation true bool/string 展示/隐藏/添加导航. true为使用子弹模式导航,false不使用。可通过ID或CLASS来添加html标签
navigationCenter true bool 导航居中
navigationClass slider__nav string 导航块的样式
navigationItemClass slider__nav-item string 导航项目的样式
navigationCurrentItemClass slider__nav-item–current string 当前导航项目的样式
keyboard true bool 是否使用键盘的左右箭头键
touchDistance 60 int/bool 最小触摸滑动距离调用事件。false关闭触摸。
beforeInit function(){} function 插件初始化前调用
afterInit function(){} function 插件初始化后调用
beforeTransition function(){} function 滑块改变前调用
afterTransition function(){} function 滑块改变后调用

免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
最新其他更多

纯CSS实现多标签自动显示超出数量的思路详解

    有多个宽度不同的标签水平排列,当外层宽度不足时,会自动提示超出的数量,这篇文章主要介绍了纯 CSS 实现多标签自动显示超出数量的思路详解,需要的朋友可以参考下

小黑 CSS相关2026-07-20

使用CSS实现渐变圆角边框的效果

    这篇文章给大家介绍了如何使用CSS实现渐变圆角边框的效果,有没有发现在现如今的网站应用中,我们大量的使用到这类场景,在解决这类问题时,我们利用了css的mask与mask-composite属性

小黑 CSS相关2026-07-20

css3收货地址平行四边形的线条样式示例代码

    这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

小黑 CSS相关2026-07-20

CSS实现空心尖角的示例代码

网络 CSS相关2026-07-20

CSS3用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~

小黑 CSS相关2026-07-20

下一篇
我来说两句
抢沙发