Options
+ General
| Name | Default | Description |
|---|---|---|
|
mode
|
'horizontal' | Type of transition between slides |
|
speed
|
500 | Slide transition duration (in ms) |
|
slideMargin
|
0 | Margin between each slide |
|
startSlide
|
0 | Starting slide index (zero-based) |
|
randomStart
|
false | Start slider on a random slide |
|
slideSelector
|
'' | Element to use as slides (ex. 'div.slide'). Note: by default, bxSlider will use all immediate children of the slider element |
|
infiniteLoop
|
true | If true, clicking "Next" while on the last slide will transition to the first slide and vice-versa |
|
hideControlOnEnd
|
false | If true, "Prev" and "Next" controls will receive a class disabled when slide is the first or the last Note: Only used when infiniteLoop: false |
|
easing
|
null | The type of "easing" to use during transitions. If using CSS transitions, include a value for the transition-timing-function property. If not using CSS transitions, you may include plugins/jquery.easing.1.3.js for many options. See http://gsgd.co.uk/sandbox/jquery/easing/ for more info. |
|
captions
|
false | Include image captions. Captions are derived from the image's title attribute |
|
ticker
|
false | Use slider in ticker mode (similar to a news ticker) |
|
tickerHover
|
false | Ticker will pause when mouse hovers over slider. Note: this functionality does NOT work if using CSS transitions! |
|
adaptiveHeight
|
false | Dynamically adjust slider height based on each slide's height |
|
adaptiveHeightSpeed
|
500 | Slide height transition duration (in ms). Note: only used if adaptiveHeight: true |
|
video
|
false | If any slides contain video, set this to true. Also, include plugins/jquery.fitvids.js See http://fitvidsjs.com/ for more info |
|
responsive
|
true | Enable or disable auto resize of the slider. Useful if you need to use fixed width sliders. |
|
useCSS
|
true | If true, CSS transitions will be used for horizontal and vertical slide animations (this uses native hardware acceleration). If false, jQuery animate() will be used. |
|
preloadImages
|
'visible' | If 'all', preloads all images before starting the slider. If 'visible', preloads only images in the initially visible slides before starting the slider (tip: use 'visible' if all slides are identical dimensions) |
|
touchEnabled
|
true | If true, slider will allow touch swipe transitions |
|
swipeThreshold
|
50 | Amount of pixels a touch swipe needs to exceed in order to execute a slide transition. Note: only used if touchEnabled: true |
|
oneToOneTouch
|
true | If true, non-fade slides follow the finger as it swipes |
|
preventDefaultSwipeX
|
true | If true, touch screen will not move along the x-axis as the finger swipes |
|
preventDefaultSwipeY
|
false | If true, touch screen will not move along the y-axis as the finger swipes |
|
wrapperClass
|
'bx-wrapper' | Class to wrap the slider in. Change to prevent from using default bxSlider styles. |
+ Pager
| Name | Default | Description |
|---|---|---|
|
pager
|
true | If true, a pager will be added |
|
pagerType
|
'full' | If 'full', a pager link will be generated for each slide. If 'short', a x / y pager will be used (ex. 1 / 5) |
|
pagerShortSeparator
|
' / ' | If pagerType: 'short', pager will use this value as the separating character |
|
pagerSelector
|
'' | Element used to populate the populate the pager. By default, the pager is appended to the bx-viewport |
|
pagerCustom
|
null | Parent element to be used as the pager. Parent element must contain a element for each slide. See example here. Not for use with dynamic carousels. |
|
buildPager
|
null | If supplied, function is called on every slide element, and the returned value is used as the pager item markup. See examples for detailed implementation |
+ Controls
| Name | Default | Description |
|---|---|---|
|
controls
|
true | If true, "Next" / "Prev" controls will be added |
|
nextText
|
'Next' | Text to be used for the "Next" control |
|
prevText
|
'Prev' | Text to be used for the "Prev" control |
|
nextSelector
|
null | Element used to populate the "Next" control |
|
prevSelector
|
null | Element used to populate the "Prev" control |
|
autoControls
|
false | If true, "Start" / "Stop" controls will be added |
|
startText
|
'Start' | Text to be used for the "Start" control |
|
stopText
|
'Stop' | Text to be used for the "Stop" control |
|
autoControlsCombine
|
false | When slideshow is playing only "Stop" control is displayed and vice-versa |
|
autoControlsSelector
|
null | Element used to populate the auto controls |
|
keyboardEnabled
|
false | Enable keyboard navigation for visible sliders |
+ Auto
| Name | Default | Description |
|---|---|---|
|
auto
|
false | Slides will automatically transition |
|
stopAutoOnClick
|
false | Auto will stop on interaction with controls |
|
pause
|
4000 | The amount of time (in ms) between each auto transition |
|
autoStart
|
true | Auto show starts playing on load. If false, slideshow will start when the "Start" control is clicked |
|
autoDirection
|
'next' | The direction of auto show slide transitions |
|
autoHover
|
false | Auto show will pause when mouse hovers over slider |
|
autoDelay
|
0 | Time (in ms) auto show should wait before starting |
+ Carousel
| Name | Default | Description |
|---|---|---|
|
minSlides
|
1 | The minimum number of slides to be shown. Slides will be sized down if carousel becomes smaller than the original size. |
|
maxSlides
|
1 | The maximum number of slides to be shown. Slides will be sized up if carousel becomes larger than the original size. |
|
moveSlides
|
0 | The number of slides to move on transition. This value must be >= minSlides, and <= maxSlides. If zero (default), the number of fully-visible slides will be used. |
|
slideWidth
|
0 | The width of each slide. This setting is required for all horizontal carousels! |
|
shrinkItems
|
false | The Carousel will only show whole items and shrink the images to fit the viewport based on maxSlides / minSlides. |
+ Keyboard
| Name | Default | Description |
|---|---|---|
|
keyboardEnabled
|
false | Allows for keyboard control of visible slider. Keypress ignored if slider not visible. |
+ Accessibility
| Name | Default | Description |
|---|---|---|
|
ariaLive
|
true | Adds Aria Live attribute to slider. |
|
ariaHidden
|
true | Adds Aria Hidden attribute to any nonvisible slides. |
+ Callbacks
| Name | Arguments | Description |
|---|---|---|
|
onSliderLoad
|
currentIndex:
element index of the current slide
|
Executes immediately after the slider is fully loaded |
|
onSliderResize
|
currentIndex:
element index of the current slide
|
Executes immediately after the slider is resized |
|
onSlideBefore
|
$slideElement:
jQuery element of the destination element
oldIndex:
element index of the previous slide (before the transition)
newIndex:
element index of the destination slide (after the transition)
|
Executes immediately before each slide transition. |
|
onSlideAfter
|
$slideElement:
jQuery element of the destination element
oldIndex:
element index of the previous slide (before the transition)
newIndex:
element index of the destination slide (after the transition)
|
Executes immediately after each slide transition. Function argument is the current slide element (when transition completes). |
|
onSlideNext
|
$slideElement:
jQuery element of the destination element
oldIndex:
element index of the previous slide (before the transition)
newIndex:
element index of the destination slide (after the transition)
|
Executes immediately before each "Next" slide transition. Function argument is the target (next) slide element. |
|
onSlidePrev
|
$slideElement:
jQuery element of the destination element
oldIndex:
element index of the previous slide (before the transition)
newIndex:
element index of the destination slide (after the transition)
|
Executes immediately before each "Prev" slide transition. Function argument is the target (prev) slide element. |
+ Public Methods
| Name | Description |
|---|---|
|
goToSlide
|
Performs a slide transition to the supplied slide index (zero-based) |
|
goToNextSlide
|
Performs a "Next" slide transition |
|
goToPrevSlide
|
Performs a "Prev" slide transition |
|
startAuto
|
Starts the auto show. Provide an argument false to prevent the auto controls from being updated. |
|
stopAuto
|
Stops the auto show. Provide an argument false to prevent the auto controls from being updated. |
|
getCurrentSlide
|
Returns the current active slide |
|
getSlideCount
|
Returns the total number of slides in the slider |
|
redrawSlider
|
Redraw the slider. Useful when needing to redraw a hidden slider after it is unhidden. |
|
reloadSlider
|
Reload the slider. Useful when adding slides on the fly. Accepts an optional settings object. |
|
destroySlider
|
Destroy the slider. This reverts all slider elements back to their original state (before calling the slider). |