选项

+ 一般

名称 默认 描述
mode
'horizontal', 'vertical', 'fade'
'horizontal' 幻灯片之间的过渡类型
speed
integer
500 幻灯片过渡时间(以毫秒为单位)
slideMargin
integer
0 每张幻灯片之间的边距
startSlide
integer
0 起始幻灯片索引(从零开始)
randomStart
boolean
false 随机幻灯片上的开始滑块
slideSelector
jQuery selector
'' 用作幻灯片的元素(例如“ div.slide”)。
注意:默认情况下,bxSlider将使用slider元素的所有直接子元素
infiniteLoop
boolean
true 如果为true,则在最后一张幻灯片上单击“下一步”将过渡到第一张幻灯片,反之亦然
hideControlOnEnd
boolean
false 如果为true,则当slide为第一个或最后一个幻灯片时,“上一个”和“下一个”控件将收到一个禁用的类
注意:仅当infiniteLoop:false时使用
easing
if using CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'. If not using CSS: 'swing', 'linear' (see the above file for more options)
null 过渡期间使用的“缓动”类型。如果使用CSS过渡,请为transition-timing-function属性添加一个值。如果不使用CSS转换,则可以在许多选项中包含plugins / jquery.easing.1.3.js。
有关更多信息,请参见 http://gsgd.co.uk/sandbox/jquery/easing/
captions
boolean
false 包括图像标题。标题来自图像的标题属性
ticker
boolean
false 在股票行情模式下使用滑块(类似于新闻行情)
tickerHover
boolean
false 当鼠标悬停在滑块上时,股票交易代码将暂停。注意:如果使用CSS过渡,则此功能不起作用!
adaptiveHeight
boolean
false 根据每个幻灯片的高度动态调整滑块的高度
adaptiveHeightSpeed
integer
500 幻灯片高度转换持续时间(以毫秒为单位)。注意:仅当adaptiveHeight:true时使用
video
boolean
false 如果任何幻灯片包含视频,请将其设置为true。另外,包括plugins / jquery.fitvids.js
有关更多信息,请参见http://fitvidsjs.com/
responsive
boolean
true 启用或禁用滑块的自动调整大小。如果需要使用固定宽度的滑块,则很有用。
useCSS
boolean
true 如果为true,则CSS过渡将用于水平和垂直幻灯片动画(这将使用本机硬件加速)。如果为false,将使用jQuery animate()。
preloadImages
'all', 'visible'
'visible' 如果为“ all”,则在启动滑块之前预加载所有图像。如果为“可见”,则在启动滑块之前仅预加载初始可见的幻灯片中的图像(提示:如果所有幻灯片尺寸相同,则使用“可见”)
touchEnabled
boolean
true 如果为true,则滑块将允许触摸滑动过渡
swipeThreshold
integer
50 触摸滑动需要超过像素数量才能执行幻灯片过渡。注意:仅在touchEnabled:true时使用
oneToOneTouch
boolean
true 如果为true,则滑动时跟随手指的是不褪色的幻灯片
preventDefaultSwipeX
boolean
true 如果为true,则手指滑动时触摸屏将不会沿x轴移动
preventDefaultSwipeY
boolean
false 如果为true,则手指滑动时触摸屏将不会沿y轴移动
wrapperClass
string
'bx-wrapper' 用于包装滑块的类。进行更改以防止使用默认的bxSlider样式。

+ 分页

名称 默认 描述
pager
boolean
true 如果为true,将添加一个分页
pagerType
'full', 'short'
'full' 如果为“完整”,将为每个幻灯片生成一个分页链接。如果为'short',则将使用ax / y传呼机(例如1/5)
pagerShortSeparator
string
' / ' 如果pagerType:'short',则分页将使用此值作为分隔符
pagerSelector
jQuery selector
'' 用于填充分页的元素。默认情况下,寻呼机被附加到bx-viewport
pagerCustom
jQuery selector
null 用作分页的父元素。父元素必须为每个幻灯片包含一个元素。在这里查看示例。不适用于动态轮播。
buildPager
function(slideIndex)
null 如果提供了此函数,则会在每个幻灯片元素上调用函数,并将返回的值用作分页项目标记。
查看示例以了解详细的实现

+ 控制器

名称 默认 描述
controls
boolean
true 如果为true,则将添加“下一步” /“上一步”控件
nextText
string
'Next' 用于“下一步”控件的文本
prevText
string
'Prev' 用于“上一个”控件的文本
nextSelector
jQuery selector
null 用于填充“下一步”控件的元素
prevSelector
jQuery selector
null 用于填充“上一个”控件的元素
autoControls
boolean
false 如果为true,则将添加“开始” /“停止”控件
startText
string
'Start' 用于“开始”控件的文本
stopText
string
'Stop' 用于“停止”控件的文本
autoControlsCombine
boolean
false 播放幻灯片时,仅显示“停止”控件,反之亦然
autoControlsSelector
jQuery selector
null 用于填充自动控件的元素
keyboardEnabled
boolean
false 为可见的滑块启用键盘导航

+ 自动

名称 默认 描述
auto
boolean
false 幻灯片将自动过渡
stopAutoOnClick
boolean
false 自动将停止与控件的交互
pause
integer
4000 每次自动转换之间的时间(以毫秒为单位)
autoStart
boolean
true 自动显示开始加载时播放。如果为false,则在单击“开始”控件时开始幻灯片放映
autoDirection
'next', 'prev'
'next' 自动显示幻灯片过渡的方向
autoHover
boolean
false 当鼠标悬停在滑块上时,自动显示将暂停
autoDelay
integer
0 自动显示的时间(以毫秒为单位)应在开始之前等待

+ 轮播

名称 默认 描述
minSlides
integer
1 要显示的最小幻灯片数量。如果转盘尺寸小于原始尺寸,则会缩小幻灯片的尺寸。
maxSlides
integer
1 要显示的最大幻灯片数量。如果转盘尺寸大于原始尺寸,则会调整幻灯片的大小。
moveSlides
integer
0 过渡时要移动的幻灯片数。此值必须>> minSlides,并且<= maxSlides。如果为零(默认值),将使用完全可见的幻灯片数。
slideWidth
integer
0 每张幻灯片的宽度。所有水平传送带都需要此设置!
shrinkItems
boolean
false 轮播仅显示整个项目,并根据maxSlides / minSlides缩小图像以适合视口。

+ 键盘

名称 默认 描述
keyboardEnabled
boolean
false 允许键盘控制可见滑块。如果滑块不可见,则忽略按键。

+ 辅助功能

名称 默认 描述
ariaLive
boolean
true 将Aria Live属性添加到滑块。
ariaHidden
boolean
true 将Aria Hidden属性添加到任何不可见的幻灯片。

+ 回调

名称 数组 描述
onSliderLoad
currentIndex:
当前幻灯片的元素索引
滑块完全加载后立即执行
onSliderResize
currentIndex:
当前幻灯片的元素索引
调整滑块大小后立即执行
onSlideBefore
$slideElement:
目标元素的jQuery元素
oldIndex:
上一张幻灯片的元素索引(过渡之前)
newIndex:
目标幻灯片的元素索引(过渡后)
在每次幻灯片过渡之前立即执行。
onSlideAfter
$slideElement:
目标元素的jQuery元素
oldIndex:
上一张幻灯片的元素索引(过渡之前)
newIndex:
目标幻灯片的元素索引(过渡后)
每次幻灯片转换后立即执行。函数参数是当前的幻灯片元素(转换完成时)。
onSlideNext
$slideElement:
目标元素的jQuery元素
oldIndex:
上一张幻灯片的元素索引(过渡之前)
newIndex:
目标幻灯片的元素索引(过渡后)
在每次“下一个”幻灯片过渡之前立即执行。函数参数是目标(下一个)幻灯片元素。
onSlidePrev
$slideElement:
目标元素的jQuery元素
oldIndex:
上一张幻灯片的元素索引(过渡之前)
newIndex:
目标幻灯片的元素索引(过渡后)
在每个“上一个”幻灯片过渡之前立即执行。函数参数是目标(上一个)幻灯片元素。

+ 公开方法

名称 描述
goToSlide
执行幻灯片过渡到提供的幻灯片索引(从零开始)
goToNextSlide
执行“下一个”幻灯片过渡
goToPrevSlide
执行“上一个”幻灯片过渡
startAuto
开始自动显示。提供参数false可以防止自动控件被更新。
stopAuto
停止自动显示。提供参数false可以防止自动控件被更新。
getCurrentSlide
返回当前活动幻灯片
getSlideCount
返回滑块中的幻灯片总数
redrawSlider
重新绘制滑块。需要在取消隐藏后重新绘制隐藏的滑块时很有用。
reloadSlider
重新加载滑块。快速添加幻灯片时很有用。接受可选的设置对象。
destroySlider
销毁滑块。这会将所有滑块元素恢复为原始状态(在调用滑块之前)。