Back to post

Bxslider is fully responsive and light-weight jQuery content slider plugin that supports most of the modern browsers and devices. There are tons of configuration options and you can configure it according to your requirements.

Features:

How to use it:

1. Include the Javascript jquery.bxslider.js at the bottom of the web page.

<script src="path/to/jquery.bxslider.js"></script>

2. Include the CSS jquery.bxslider.css in the header of the page.

<link rel="stylesheet" href="path/to/jquery.bxslider.css">

3. Add the basic HTML to the page.

<ul class="bxslider">
  <li><img src="path/to/demo-1.jpg" /></li>
  <li><img src="path/to/demo-2.jpg" /></li>
  <li><img src="path/to/demo-3.jpg" /></li>
</ul>

4. Initialize the plugin and we're ready to go. 

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

** Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!

General options:

Name Default Description
mode
'horizontal', 'vertical', 'fade'
 'horizontal' Type of transition between slides
speed
integer
 500 Slide transition duration (in ms)
slideMargin
integer
 0 Margin between each slide
startSlide
integer
 0 Starting slide index (zero-based)
randomStart
boolean
 false Start slider on a random slide
slideSelector
jQuery selector
 '' Element to use as slides (ex. 'div.slide').
Note: by default, bxSlider will use all immediate children of the slider element
infiniteLoop
boolean
 true If true, clicking "Next" while on the last slide will transition to the first slide and vice-versa
hideControlOnEnd
boolean
 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
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 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
boolean
 false Include image captions. Captions are derived from the image's title attribute
ticker
boolean
 false Use slider in ticker mode (similar to a news ticker)
tickerHover
boolean
 false Ticker will pause when mouse hovers over slider. Note: this functionality does NOT work if using CSS transitions!
adaptiveHeight
boolean
 false Dynamically adjust slider height based on each slide's height
adaptiveHeightSpeed
integer
 500 Slide height transition duration (in ms). Note: only used if adaptiveHeight: true
video
boolean
 false If any slides contain video, set this to true. Also, include plugins/jquery.fitvids.js
See http://fitvidsjs.com/ for more info
responsive
boolean
 true Enable or disable auto resize of the slider. Useful if you need to use fixed width sliders.
useCSS
boolean
 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
'all', 'visible'
 '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
boolean
 true If true, slider will allow touch swipe transitions
swipeThreshold
integer
 50 Amount of pixels a touch swipe needs to exceed in order to execute a slide transition. Note: only used if touchEnabled: true
oneToOneTouch
boolean
 true If true, non-fade slides follow the finger as it swipes
preventDefaultSwipeX
boolean
 true If true, touch screen will not move along the x-axis as the finger swipes
preventDefaultSwipeY
boolean
 false If true, touch screen will not move along the y-axis as the finger swipes
wrapperClass
string
 'bx-wrapper' Class to wrap the slider in. Change to prevent from using default bxSlider styles.

Pager option

Name Default Description
pager
boolean
 true If true, a pager will be added
pagerType
'full', 'short'
 '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
string
 ' / ' If pagerType: 'short', pager will use this value as the separating character
pagerSelector
jQuery selector
 '' Element used to populate the populate the pager. By default, the pager is appended to the bx-viewport
pagerCustom
jQuery selector
 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
function(slideIndex)
 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
boolean
 true If true, "Next" / "Prev" controls will be added
nextText
string
 'Next' Text to be used for the "Next" control
prevText
string
 'Prev' Text to be used for the "Prev" control
nextSelector
jQuery selector
 null Element used to populate the "Next" control
prevSelector
jQuery selector
 null Element used to populate the "Prev" control
autoControls
boolean
 false If true, "Start" / "Stop" controls will be added
startText
string
 'Start' Text to be used for the "Start" control
stopText
string
 'Stop' Text to be used for the "Stop" control
autoControlsCombine
boolean
 false When slideshow is playing only "Stop" control is displayed and vice-versa
autoControlsSelector
jQuery selector
 null Element used to populate the auto controls
keyboardEnabled
boolean
 false Enable keyboard navigation for visible sliders

Auto

Name Default Description
auto
boolean
 false Slides will automatically transition
stopAutoOnClick
boolean
 false Auto will stop on interaction with controls
pause
integer
 4000 The amount of time (in ms) between each auto transition
autoStart
boolean
 true Auto show starts playing on load. If false, slideshow will start when the "Start" control is clicked
autoDirection
'next', 'prev'
 'next' The direction of auto show slide transitions
autoHover
boolean
 false Auto show will pause when mouse hovers over slider
autoDelay
integer
 0 Time (in ms) auto show should wait before starting

Carousel

Name Default Description
minSlides
integer
 1 The minimum number of slides to be shown. Slides will be sized down if carousel becomes smaller than the original size.
maxSlides
integer
 1 The maximum number of slides to be shown. Slides will be sized up if carousel becomes larger than the original size.
moveSlides
integer
 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
integer
 0 The width of each slide. This setting is required for all horizontal carousels!
shrinkItems
boolean
 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
boolean
 false Allows for keyboard control of visible slider. Keypress ignored if slider not visible.

Accessibility

Name Default Description
ariaLive
boolean
 true Adds Aria Live attribute to slider.
ariaHidden
boolean
 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).

Default slide

HTML structure

<ul id="defaultSlider">
  <li><img src="path/to/demo-1.jpg" /></li>
  <li><img src="path/to/demo-2.jpg" /></li>
  <li><img src="path/to/demo-3.jpg" /></li>
</ul>

Script

$(document).ready(function(){
  $('#defaultSlider').bxSlider();
});

Vertical slide

HTML structure

<ul id="verticalSlider">
  <li><img src="path/to/demo-1.jpg" /></li>
  <li><img src="path/to/demo-2.jpg" /></li>
  <li><img src="path/to/demo-3.jpg" /></li>
</ul>

Script

$(document).ready(function(){
  $('#verticalSlider').bxSlider({
     mode: 'vertical'
  });
});

Auto show with start / stop controls

HTML structure

<ul id="autoControll">
  <li><img src="path/to/demo-1.jpg" /></li>
  <li><img src="path/to/demo-2.jpg" /></li>
  <li><img src="path/to/demo-3.jpg" /></li>
</ul>

Script

$(document).ready(function(){
  $('#autoControll').bxSlider({
    auto: true,
    autoControls: true,
    stopAutoOnClick: true
  });
});

Caption Slide

HTML structure

<ul id="captionSlide">
  <li><img src="path/to/demo-1.jpg" title="Caption-1" alt=""/></li>
  <li><img src="path/to/demo-2.jpg" title="Caption-2" alt=""/></li>
  <li><img src="path/to/demo-3.jpg" title="Caption-3" alt=""/></li>
</ul>

Script

$(document).ready(function(){
  $('#captionSlide').bxSlider({
    captions: true
  });
});