当前位置:JS特效 » 幻灯片和轮播图 » hslider.js-简洁的响应式全屏宽度jQuery幻灯片插件
 hslider.js-简洁的响应式全屏宽度jQuery幻灯片插件
如果您觉得内容不错,请分享:
标签: 响应式幻灯片

插件介绍

hslider.js是一款简单实用的响应式全屏宽度jQuery幻灯片插件。hslider.js可以根据屏幕的大小自动调整幻灯片的宽度,幻灯片宽度始终占据整个视口的宽度。它使用简单,并且效果非常好。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:73
简要教程

hslider.js是一款简单实用的响应式全屏宽度jQuery幻灯片插件。hslider.js可以根据屏幕的大小自动调整幻灯片的宽度,幻灯片宽度始终占据整个视口的宽度。它使用简单,并且效果非常好。

使用方法

使用hslider.js幻灯片插件需要在页面中引入jquery、jquery.hslider.js和图片预加载文件imagesloaded.pkgd.min.js,以及CSS样式文件style.css。



           
           
                
HTML结构

hslider.js幻灯片可以使用

元素来作为幻灯片,或者使用无序列表作为幻灯片。

......
......
......
  • ......
  • ......
  • ......
初始化插件

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

$( ".hsldr-container" ).hslider();               
                

配置参数

hslider.js幻灯片插件的可用配置参数有:

  • navBar:是否在底部显示导航栏。
  • auto:是否自动播放。
  • delay:动画过渡的延迟时间。

例如:

$( ".hsldr-container" ).hslider({
  navBar: false,
  auto: false,
  delay: 4000
});
                  
                

hslider.js幻灯片插件的github地址为:https://github.com/CodeInnTeam/hslider

Top