欢迎光临一流素材网,免积分免费素材下载!
AD

轻量级响应式jQuery轮播图/幻灯片插件-lightslider

所属栏目:轮播图/幻灯片更新时间:2020-03-10原作者:sachinchoolur来源:github发布者:deepdfhy浏览:0
基本信息

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

功能特点:

完全响应式设计,自动适配任何设备。

可以单独设置每一个breakpoint。

画廊模式中可以创建带缩略图的幻灯片。

支持移动手机的swipe和触摸拖拽。

可动态添加或删除幻灯片。

文件体积小,主题丰富,实现简单。

采用CSS过渡效果,不支持CSS过渡效果的浏览器中使用jQuery来回退。

提供丰富的回调函数和公开方法。

提供自动播放和无限循环的旋转木马模式。

支持键盘、箭头和圆点导航。

跨浏览器、跨设备:Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone。

同一个页面中可以生成多个幻灯片实例。

幻灯片的内容可以是图片、视频等。

使用方法:

页面引用以下文件

<link type="text/css" rel="stylesheet" href="css/lightSlider.css" />
<script src="js/jquery.min.js"></script>
<script src="js/lightSlider.js"></script>

HTML结构如下:

<ul id="light-slider">
    <li>
        <h3>First Slide</h3>
        <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
    </li>
    <li>
        <h3>Second Slide</h3>
        <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
    </li>
    ...
</ul>


初始化插件

在页面DOM元素加载完毕之后,可以通过lightSlider()方法来初始化该幻灯片插件。

<script type="text/javascript">
    $(document).ready(function() {
        $("#light-slider").lightSlider();
    });
</script>

配置参数

该幻灯片插件可用的配置参数有:

参数类型默认值描述
itemnumber3同时显示的slide的数量
autoWidthbooleanfalse定制每一个slide的宽度
slideMovenumber1同一时间被移动的slide的数量
slideMarginnumber10每一个slide之间的间距
addClassstring''为幻灯片添加额外的class
modestring'slide'动画过渡的类型,可以是'slide'或'fade'
useCSSbooleantruetrue表示使用CSS动画过渡效果,false表示使用jQuery动画过渡效果
cssEasingstring'ease'CSS过渡动画使用的easing效果
easingstring'linear'jQuery过渡动画使用的easing效果
speednumber400过渡动画的持续时间,单位毫秒
autobooleanfalse如果设置为true,幻灯片将自动播放
pauseOnHoverbooleanfalse鼠标滑过时停止自动播放
loopbooleanfalsefalse表示在播放到最后一帧时不会跳转到开头重新播放
slideEndAnimationboleantrue允许slideEnd动画
pausenumber2000两个过渡动画之间的间隔时间
keyPressbooleanfalse是否允许使用键盘导航
controlsbooleantrue如果设置为false,prev/next按钮将不会被显示
prevHtmlstring''自定义prev按钮的HTML
nextHtmlstring''自定义next按钮的HTML
rtlbooleanfalse改变方向,从右到左
adaptiveHeightbooleanfalse基于各个slide的高度来动态调整幻灯片的高度
verticalbooleanfalse制作垂直幻灯片效果
verticalHeightnumber500垂直幻灯片模式中设置slide的高度(如果slide数量大于1)
vThumbWidthnumber100垂直幻灯片模式中缩略图的宽度
thumbItemnumber10同时显示缩略图的数量
pagerbooleantrue是否开启圆点导航
gallerybooleantrue是否开启带缩略图的幻灯片模式
galleryMarginnumber5画廊和slide之间的间距
thumbMarginnumber3缩略图之间的间距
currentPagerPositionstring'middle'缩略图的位置,可以是: 'left', 'middle', 'right'
enableTouchbooleantrue是否支持移动触摸
enableDragbooleantrue是否支持桌面设备中使用鼠标拖拽切换幻灯片
freeMovebooleantrue是否允许在swipe或drag的时候自由移动幻灯片
responsiveobjectnull单独设置每一个breakpoint


回调函数

回调函数参数描述
onBeforeStartel幻灯片开始加载时触发
onSliderLoadel幻灯片被加载后立刻执行
onBeforeSlideel每一个slide过渡动画之前被执行
onAfterSlideel每一个slide过渡动画之后被执行
onBeforeNextSlideel每一次"Next" slide过渡动画被执行前触发
onBeforePrevSlideel每一次"Prev" slide过渡动画被执行前触发

 公开方法

方法描述
goToSlide()跳转到指定的slide
goToPrevSlide()跳转到前一个slide
goToNextSlide()跳转到下一个slide
refresh刷新幻灯片
play()播放幻灯片
pause()暂停幻灯片


代码下载
本地下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1jquery手机端响应式banner图片滚动切换效果

2兼容触屏手机浏览的JS全屏焦点图代码

3jQuery touchSlider全屏图片轮播幻灯焦点图代码

4jquery灯箱画廊插件lightgallery

5jquery轮播焦点图

6js卡片式图片叠加滚动切换代码

7带左右箭头滑动焦点图幻灯片jQuery特效代码

8jquery旋转木马插件SLICK

93D效果图片轮播效果代码

10jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js

最新更新的

1jQuery响应式触屏图片左右滚动代码owl.carousel

2轻量级响应式jQuery轮播图/幻灯片插件-lightslider

3移动端滑动JS响应式轮播图插件

4jQuery倾斜图片切换滚动焦点图幻灯片代码

5jQuery版仿淘宝商城天猫首页多格焦点图效果

6易迅网竖排多格jquery焦点图代码

7jQ索引按钮+缩略图双重切换

8兼容触屏手机浏览的JS全屏焦点图代码

9鼠标滑过+自动播放jQ全屏焦点图代码

10Diapo轮播图-幻灯片插件