这是一款超棒的 jQuery 幻灯片播放插件,用于创建背景图片轮播图,该轮播插件式响应式的,并带有下一个、上一个按钮和位于下方多点位导航功能,使用起来特别简单,只需要两个简单步骤,首先定义轮播图的区域,一般是一个div元素,然后调用插件方法,轮播图幻灯片就已经搞定了。该插件提供了默认的占位图,后续可以通过 CSS 的background-image:属性即可轻松放置幻灯片图片,使用起来特别的方便。
此外,该插件还支持多种选项的配置,如轮播图数量、播放速度、延迟时间、是否启用自动播放等选项都可以通过属性轻松配置。支持的全部自定义配置项如下:
选项 | 描述、默认、类型 |
---|---|
nbr_slides | 此选项定义您想要在滑块中附加的幻灯片数量。默认值:5,类型:数字。 $ (“.the_slider” ).slicarousel ({ nbr_slides :6 ,}); |
class_name_prefix | 为 CSS 类名设置前缀很有用,可以避免类混淆。默认值:“s_”,类型:字符串。 $ (“.the_slider” ).slicarousel ({ class_name_prefix :“s_” ,}); |
arrows | 启用(true)/禁用(false)下一个和上一个箭头按钮。默认值:true,类型:布尔值。 $ ( “.the_slider” ). slicarousel ({ arrows : true , }); |
dot_nav | 启用(true)/禁用(false)图像滑块的点导航。默认值:true,类型:布尔值。 $ ( “.the_slider” ). slicarousel ({ dot_nav : true , }); |
full_width | 是否设置轮播的全宽(100%)。默认值:true,类型:布尔值。 $ (“.the_slider” ).slicarousel ({ full_width :true ,}); |
delay | 它定义下一个/上一个图像转换之间的延迟时间(以毫秒为单位)。默认值:2500,类型:数字。 $ (“。the_slider” ).slicarousel ({ delay:2500 ,}); |
speed | 它定义滑动的过渡速度。默认值:500,类型:数字 | 字符串。 $ ( ".the_slider" ).slicarousel ( { speed:'normal' , }); |
autoplay | 启用/禁用自动播放。此对象选项附带另外两个有用的选项。请参阅示例。 $ ( ".the_slider" ).slicarousel ( { "autoplay" : { "enabled" : true , // 启用自动播放滑块"direction" : "ltr" // 方向从右到左 rtl 或从左到右 ltr }, }); |