# bxSlider
bxSlider is a fully-featured, responsive jQuery content slider plugin that enables developers to create carousels, image galleries, and content sliders with ease. It supports horizontal, vertical, and fade transition modes, and includes built-in touch/swipe support for mobile devices, making it ideal for creating responsive websites that work across all devices and screen sizes.
The plugin offers extensive customization through configuration options, callback functions, and public methods. It leverages CSS3 transitions for hardware-accelerated animations when available, falling back to jQuery animations for older browsers. bxSlider handles image preloading, adaptive heights, infinite looping, auto-play functionality, and provides full accessibility support with ARIA attributes.
## Installation
### Include Required Files
Include jQuery and bxSlider files in your HTML page to set up the slider with required dependencies.
```html
for each slide)
pagerCustom: '#thumbnail-pager',
// Custom function to build pager item markup
buildPager: function(slideIndex) {
// Return thumbnail images as pager
return '
Product 1 $29.99
Product 2 $39.99
Product 3 $49.99
Product 4 $59.99
Product 5 $69.99
Product 6 $79.99
```
### Video Slider
Create a slider with video content support.
```html
```
### News Ticker
Create a continuously scrolling news ticker effect.
```html
Breaking: Important news headline #1
Update: Latest developments on story #2
Alert: New information about topic #3
Report: Coverage of event #4
```
## Summary
bxSlider provides a comprehensive solution for implementing responsive content sliders and carousels in jQuery-based web applications. Common use cases include image galleries with thumbnail navigation, product carousels for e-commerce sites, hero banners with auto-play functionality, testimonial sliders, news tickers, and video presentations. The plugin's extensive configuration options allow developers to customize every aspect of slider behavior, from transition modes and timing to touch interactions and accessibility features.
Integration with existing projects is straightforward: include the jQuery library and bxSlider files, create a container element with child slides, and initialize with `$('.selector').bxSlider()`. The public API methods enable programmatic control for custom navigation, while callback functions provide hooks for analytics tracking, lazy loading, and synchronization with other page elements. For complex implementations, the plugin supports custom pagers, external controls, dynamic slide addition via `reloadSlider()`, and complete teardown with `destroySlider()`. The combination of CSS3 transitions with jQuery animation fallbacks ensures smooth performance across all browsers while maintaining full functionality on touch devices.
 + '.jpg)
';
}
});
```
### Controls Options
Customize the previous/next navigation controls and their appearance.
```javascript
$('.bxslider').bxSlider({
// Show prev/next controls
controls: true,
// Text for next button
nextText: 'Next',
// Text for prev button
prevText: 'Prev',
// Custom elements for controls
nextSelector: '#slider-next',
prevSelector: '#slider-prev',
// Enable keyboard navigation (left/right arrow keys)
keyboardEnabled: true
});
```
### Auto Play Options
Configure automatic slideshow functionality with timing and direction controls.
```javascript
$('.bxslider').bxSlider({
// Enable automatic transitions
auto: true,
// Time between transitions in milliseconds
pause: 4000,
// Start auto show on load (false = start on "Start" button click)
autoStart: true,
// Direction of auto transitions: 'next' or 'prev'
autoDirection: 'next',
// Stop auto on user interaction with controls
stopAutoOnClick: true,
// Pause auto on mouse hover
autoHover: true,
// Delay before starting auto (in ms)
autoDelay: 1000,
// Show start/stop controls
autoControls: true,
// Text for start/stop buttons
startText: 'Start',
stopText: 'Stop',
// Combine start/stop into single toggle button
autoControlsCombine: true,
// Custom element for auto controls
autoControlsSelector: '#auto-controls'
});
```
### Carousel Options
Configure multi-slide carousels that display multiple items at once.
```javascript
$('.bxslider').bxSlider({
// Minimum number of slides to show
minSlides: 2,
// Maximum number of slides to show
maxSlides: 4,
// Number of slides to move per transition
// Must be >= minSlides and <= maxSlides
// 0 = auto (uses number of fully visible slides)
moveSlides: 1,
// Width of each slide in pixels (REQUIRED for horizontal carousels)
slideWidth: 300,
// Shrink items to fit viewport based on maxSlides/minSlides
shrinkItems: true,
// Margin between carousel slides
slideMargin: 10
});
```
### Touch and Swipe Options
Configure touch interaction for mobile devices.
```javascript
$('.bxslider').bxSlider({
// Enable touch swipe transitions
touchEnabled: true,
// Minimum swipe distance to trigger slide change (in pixels)
swipeThreshold: 50,
// Slide follows finger as it swipes (non-fade modes only)
oneToOneTouch: true,
// Prevent page scroll on x-axis swipe
preventDefaultSwipeX: true,
// Prevent page scroll on y-axis swipe
preventDefaultSwipeY: false
});
```
### Adaptive Height and Responsive Options
Configure responsive behavior and dynamic height adjustment.
```javascript
$('.bxslider').bxSlider({
// Enable responsive resizing
responsive: true,
// Dynamically adjust height based on current slide
adaptiveHeight: true,
// Height transition speed in milliseconds
adaptiveHeightSpeed: 500,
// Image preloading: 'all', 'visible', or 'none'
preloadImages: 'visible'
});
```
### Accessibility Options
Configure ARIA attributes for screen reader support.
```javascript
$('.bxslider').bxSlider({
// Add aria-live attribute to slider viewport
ariaLive: true,
// Add aria-hidden to non-visible slides
ariaHidden: true
});
```
### Additional Options
Configure captions, tickers, video support, and wrapper styling.
```javascript
$('.bxslider').bxSlider({
// Show image captions (from img title attribute)
captions: true,
// Enable ticker mode (continuous scrolling like news ticker)
ticker: false,
// Pause ticker on hover (doesn't work with CSS transitions)
tickerHover: false,
// Enable video support (requires jquery.fitvids.js)
video: true,
// Custom wrapper class (change to use custom styles)
wrapperClass: 'bx-wrapper'
});
```
## Public Methods
### goToSlide(index)
Navigate directly to a specific slide by its zero-based index.
```javascript
$(document).ready(function(){
var slider = $('.bxslider').bxSlider();
// Go to the 4th slide (index 3)
slider.goToSlide(3);
// Navigate via custom buttons
$('#slide-1-btn').click(function() {
slider.goToSlide(0);
});
$('#slide-2-btn').click(function() {
slider.goToSlide(1);
});
});
```
### goToNextSlide()
Transition to the next slide in the sequence.
```javascript
$(document).ready(function(){
var slider = $('.bxslider').bxSlider({
controls: false // Hide default controls
});
// Custom next button
$('#custom-next').click(function(e) {
e.preventDefault();
slider.goToNextSlide();
});
});
```
### goToPrevSlide()
Transition to the previous slide in the sequence.
```javascript
$(document).ready(function(){
var slider = $('.bxslider').bxSlider({
controls: false
});
// Custom previous button
$('#custom-prev').click(function(e) {
e.preventDefault();
slider.goToPrevSlide();
});
});
```
### startAuto() / stopAuto()
Control the automatic slideshow programmatically.
```javascript
$(document).ready(function(){
var slider = $('.bxslider').bxSlider({
auto: true,
autoStart: false // Don't start automatically
});
// Start auto play
$('#play-btn').click(function() {
slider.startAuto();
});
// Stop auto play
$('#pause-btn').click(function() {
slider.stopAuto();
});
// Pass true to prevent auto control button update
slider.startAuto(true);
slider.stopAuto(true);
});
```
### getCurrentSlide()
Get the index of the currently active slide.
```javascript
$(document).ready(function(){
var slider = $('.bxslider').bxSlider();
// Get current slide index
$('#show-current').click(function() {
var currentIndex = slider.getCurrentSlide();
console.log('Current slide: ' + currentIndex);
alert('You are viewing slide #' + (currentIndex + 1));
});
});
```
### getSlideCount()
Get the total number of slides in the slider.
```javascript
$(document).ready(function(){
var slider = $('.bxslider').bxSlider();
// Get total slide count
var totalSlides = slider.getSlideCount();
console.log('Total slides: ' + totalSlides);
// Display slide counter
$('#slide-counter').html('1 / ' + totalSlides);
});
```
### redrawSlider()
Redraw the slider. Useful when showing a previously hidden slider.
```javascript
$(document).ready(function(){
var slider = $('.bxslider').bxSlider();
// Show hidden slider and redraw
$('#show-slider').click(function() {
$('.slider-container').show();
slider.redrawSlider();
});
// Redraw after tab switch
$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
slider.redrawSlider();
});
});
```
### reloadSlider()
Reload the slider with optional new settings. Useful when adding/removing slides dynamically.
```javascript
$(document).ready(function(){
var slider = $('.bxslider').bxSlider({
mode: 'horizontal'
});
// Reload with same settings
$('#reload-btn').click(function() {
slider.reloadSlider();
});
// Reload with new settings
$('#change-mode').click(function() {
slider.reloadSlider({
mode: 'fade',
speed: 1000
});
});
// Add new slide and reload
$('#add-slide').click(function() {
$('.bxslider').append('
