### Manual bxSlider Installation
Source: https://bxslider.com/install
Setup instructions for manually downloaded files, including library links, initialization script, and HTML structure.
```html
// Links to the libraries needed
// Initialize the slider
// Slider HTML (change this to your own!)
I am a slide.
I am another slide.
```
--------------------------------
### Install bxSlider via NPM
Source: https://bxslider.com/install
Commands and implementation details for using NPM to manage bxSlider dependencies.
```bash
npm install bxslider --save
```
```html
// Links to the libraries needed
// Initialize the slider
// Slider HTML (change this to your own!)
I am a slide.
I am another slide.
```
--------------------------------
### Initialize bxSlider via CDN
Source: https://bxslider.com/install
A complete HTML example demonstrating how to include the required jQuery and bxSlider files from a CDN and initialize the slider.
```html
I am a slide.
I am another slide.
```
--------------------------------
### Install bxSlider via Bower
Source: https://bxslider.com/install
Commands and implementation details for using Bower to manage bxSlider dependencies.
```bash
bower install bxslider --save
```
```html
// Links to the libraries needed
// Initialize the slider
// Slider HTML (change this to your own!)
I am a slide.
I am another slide.
```
--------------------------------
### Standard Responsive Carousel Setup
Source: https://bxslider.com/examples/carousel-demystified
Use this JavaScript to set up a responsive carousel. Configure slideWidth, minSlides, and maxSlides to control how many slides are displayed at different screen sizes. Resize the browser to see the responsive behavior.
```javascript
$(document).ready(function(){
$('.slider1').bxSlider({
slideWidth: 200,
minSlides: 2,
maxSlides: 3,
slideMargin: 10
});
});
```
```html
```
--------------------------------
### Start on a Different Slide
Source: https://bxslider.com/examples/carousel-demystified
Configures the carousel to start at a specific index. Note that startSlide uses zero-based indexing corresponding to the pager.
```javascript
$(document).ready(function(){
$('.slider6').bxSlider({
slideWidth: 300,
minSlides: 2,
maxSlides: 3,
startSlide: 2,
slideMargin: 10
});
});
```
```html
```
--------------------------------
### Initialize Multiple bxSlider Instances
Source: https://bxslider.com/examples/multiple-slideshows
Configures two separate sliders with distinct settings for transition mode, auto-play, and spacing.
```javascript
$('#slider1').bxSlider({
mode: 'fade',
auto: true,
autoControls: true,
pause: 2000
});
$('#slider2').bxSlider({
auto: true,
autoControls: true,
pause: 3000,
slideMargin: 20
});
```
--------------------------------
### bxSlider Configuration Options
Source: https://bxslider.com/options
Configuration settings for controls, auto-play, carousel, and accessibility.
```APIDOC
## Configuration Options
### Controls
- **controls** (boolean) - Default: true - If true, "Next" / "Prev" controls will be added
- **nextText** (string) - Default: 'Next' - Text for "Next" control
- **prevText** (string) - Default: 'Prev' - Text for "Prev" control
- **nextSelector** (jQuery selector) - Default: null - Element to populate "Next" control
- **prevSelector** (jQuery selector) - Default: null - Element to populate "Prev" control
- **autoControls** (boolean) - Default: false - If true, "Start" / "Stop" controls will be added
- **startText** (string) - Default: 'Start' - Text for "Start" control
- **stopText** (string) - Default: 'Stop' - Text for "Stop" control
- **autoControlsCombine** (boolean) - Default: false - Toggle "Stop"/"Start" based on state
- **autoControlsSelector** (jQuery selector) - Default: null - Element to populate auto controls
- **keyboardEnabled** (boolean) - Default: false - Enable keyboard navigation
### Auto
- **auto** (boolean) - Default: false - Slides automatically transition
- **stopAutoOnClick** (boolean) - Default: false - Auto stops on interaction
- **pause** (integer) - Default: 4000 - Time in ms between transitions
- **autoStart** (boolean) - Default: true - Auto show starts on load
- **autoDirection** ('next', 'prev') - Default: 'next' - Direction of transitions
- **autoHover** (boolean) - Default: false - Pause on mouse hover
- **autoDelay** (integer) - Default: 0 - Delay in ms before starting
### Carousel
- **minSlides** (integer) - Default: 1 - Minimum slides shown
- **maxSlides** (integer) - Default: 1 - Maximum slides shown
- **moveSlides** (integer) - Default: 0 - Slides to move on transition
- **slideWidth** (integer) - Default: 0 - Width of each slide
- **shrinkItems** (boolean) - Default: false - Show whole items only
### Accessibility
- **ariaLive** (boolean) - Default: true - Adds Aria Live attribute
- **ariaHidden** (boolean) - Default: true - Adds Aria Hidden to nonvisible slides
```
--------------------------------
### bxSlider Initialization with Callbacks
Source: https://bxslider.com/examples/callback-api
Initialize bxSlider with callbacks for slider load and slide after events. Use these callbacks to execute custom JavaScript functions when the slider finishes loading or after a slide transition.
```javascript
$('.bxslider').bxSlider({
onSliderLoad: function(){
// do funky JS stuff here
alert('Slider has finished loading. Click OK to continue!');
},
onSlideAfter: function(){
// do mind-blowing JS stuff here
alert('A slide has finished transitioning. Bravo. Click OK to continue!');
}
});
```
--------------------------------
### Initialize bxSlider with adaptiveHeight
Source: https://bxslider.com/examples/slideshow-adaptive-height
Configures the slider to adjust height dynamically and sets a fixed slide width.
```javascript
$('.bxslider').bxSlider({
adaptiveHeight: true,
slideWidth: 600
});
```
--------------------------------
### Initialize bxSlider with Captions
Source: https://bxslider.com/examples/image-slideshow-captions
Configures the bxSlider instance with fade mode and captions enabled. Requires the bxSlider jQuery plugin.
```javascript
$(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
slideWidth: 600
});
});
```
--------------------------------
### Initialize Dynamic Carousel
Source: https://bxslider.com/examples/carousel-dynamic-number-slides
Configures the bxSlider instance to maintain between three and four visible slides, scaling them as necessary.
```javascript
$('.bxslider').bxSlider({
minSlides: 3,
maxSlides: 4,
slideWidth: 170,
slideMargin: 10
});
```
--------------------------------
### Control bxSlider with Public Methods
Source: https://bxslider.com/examples/public-methods
Use these methods to trigger navigation or retrieve slider information from an initialized bxSlider instance.
```javascript
var slider = $('.bxslider').bxSlider({
mode: 'fade'
});
$('#slider-next').click(function(){
slider.goToNextSlide();
return false;
});
$('#slider-count').click(function(){
var count = slider.getSlideCount();
alert('Slide count: ' + count);
return false;
});
```
```html
```
--------------------------------
### Initialize bxSlider with Thumbnail Pager
Source: https://bxslider.com/examples/thumbnail-pager-1
Use this JavaScript to initialize the bxSlider and link it to a custom thumbnail pager. Ensure the pager element ID matches the selector.
```javascript
$('.bxslider').bxSlider({
pagerCustom: '#bx-pager'
});
```
--------------------------------
### bxSlider Public Methods
Source: https://bxslider.com/options
A collection of methods to control slide navigation, auto-play, and slider lifecycle.
```APIDOC
## Public Methods
### goToSlide
- **Description**: Performs a slide transition to the supplied slide index (zero-based).
### goToNextSlide
- **Description**: Performs a "Next" slide transition.
### goToPrevSlide
- **Description**: Performs a "Prev" slide transition.
### startAuto
- **Description**: Starts the auto show. Provide an argument false to prevent the auto controls from being updated.
### stopAuto
- **Description**: Stops the auto show. Provide an argument false to prevent the auto controls from being updated.
### getCurrentSlide
- **Description**: Returns the current active slide.
### getSlideCount
- **Description**: Returns the total number of slides in the slider.
### redrawSlider
- **Description**: Redraw the slider. Useful when needing to redraw a hidden slider after it is unhidden.
### reloadSlider
- **Description**: Reload the slider. Useful when adding slides on the fly. Accepts an optional settings object.
### destroySlider
- **Description**: Destroy the slider. This reverts all slider elements back to their original state (before calling the slider).
```
--------------------------------
### Initialize bxSlider with Auto Controls
Source: https://bxslider.com/examples/auto-show-start-stop-controls
Configures the slider to auto-play with visible controls and a pager. Requires the bxSlider jQuery plugin.
```javascript
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
stopAutoOnClick: true,
pager: true,
slideWidth: 600
});
```
```html
```
--------------------------------
### bxSlider Callbacks
Source: https://bxslider.com/options
Lifecycle hooks for tracking slider state and transitions.
```APIDOC
## Callbacks
- **onSliderLoad** (currentIndex) - Executes after slider is fully loaded
- **onSliderResize** (currentIndex) - Executes after slider is resized
- **onSlideBefore** ($slideElement, oldIndex, newIndex) - Executes before transition
- **onSlideAfter** ($slideElement, oldIndex, newIndex) - Executes after transition
- **onSlideNext** ($slideElement, oldIndex, newIndex) - Executes before "Next" transition
- **onSlidePrev** ($slideElement, oldIndex, newIndex) - Executes before "Prev" transition
```
--------------------------------
### Initialize bxSlider with Custom Controls
Source: https://bxslider.com/examples/custom-next-prev-selectors
Initializes the bxSlider with custom selectors for next and previous buttons, and custom text for these buttons. Ensure the HTML elements with the specified IDs exist.
```javascript
$('.bxslider').bxSlider({
nextSelector: '#slider-next',
prevSelector: '#slider-prev',
nextText: 'Onward →',
prevText: '← Go back'
});
```
--------------------------------
### Initialize bxSlider with custom controls
Source: https://bxslider.com/examples/manual-show-without-infinite-loop
Configures the slider to disable infinite looping and hide navigation controls when the first or last slide is reached.
```javascript
$('.bxslider').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true,
slideWidth: 600
});
```
--------------------------------
### Initialize bxSlider in Ticker Mode
Source: https://bxslider.com/examples/ticker
Use this JavaScript to initialize bxSlider with ticker mode enabled. Configure minSlides, maxSlides, slideWidth, slideMargin, and speed for ticker behavior.
```javascript
$('.bxslider').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 170,
slideMargin: 10,
ticker: true,
speed: 9000
});
```
--------------------------------
### Configure bxSlider for Static Slides
Source: https://bxslider.com/examples/carousel-static-number-slides
Use minSlides and maxSlides options to ensure a fixed number of slides are always visible. Set both to the same value for a static display.
```javascript
$('.bxslider').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: 360,
slideMargin: 10
});
```
--------------------------------
### HTML Structure for bxSlider
Source: https://bxslider.com/examples/vertical-slideshow
This HTML sets up the container for the bxSlider. Each direct child div represents a slide.
```html
```
--------------------------------
### Configuring moveSlides
Source: https://bxslider.com/examples/carousel-demystified
Uses the moveSlides setting to define how many slides are transitioned per navigation click.
```javascript
$(document).ready(function(){
$('.slider4').bxSlider({
slideWidth: 300,
minSlides: 2,
maxSlides: 3,
moveSlides: 1,
slideMargin: 10
});
});
```
```html
```
--------------------------------
### HTML Structure for Thumbnail Pager
Source: https://bxslider.com/examples/thumbnail-pager-1
This HTML sets up the bxSlider carousel and the custom thumbnail pager. Each thumbnail must be an anchor tag with a 'data-slide-index' attribute corresponding to the slide it represents. This method is not suitable for dynamic carousels.
```html
```
--------------------------------
### Configure bxSlider for Vertical Slideshow
Source: https://bxslider.com/examples/vertical-slideshow
Use this JavaScript to initialize bxSlider in vertical mode. Set the slideMargin option to control spacing between slides.
```javascript
$('.bxslider').bxSlider({
mode: 'vertical',
slideMargin: 5
});
```
--------------------------------
### Handling large slideWidth values
Source: https://bxslider.com/examples/carousel-demystified
Demonstrates behavior when slideWidth exceeds available space, causing the slider to default to minSlides and scale down.
```javascript
$(document).ready(function(){
$('.slider3').bxSlider({
slideWidth: 2000,
minSlides: 2,
maxSlides: 4,
slideMargin: 10
});
});
```
```html
```
--------------------------------
### Locked number of slides configuration
Source: https://bxslider.com/examples/carousel-demystified
Sets minSlides and maxSlides to the same value to ensure a fixed number of visible slides regardless of screen size.
```javascript
$(document).ready(function(){
$('.slider2').bxSlider({
slideWidth: 300,
minSlides: 2,
maxSlides: 2,
slideMargin: 10
});
});
```
```html
```
--------------------------------
### Thumbnail Pager HTML and CSS Structure
Source: https://bxslider.com/examples/thumbnail-pager-2
Provides the required markup and CSS overrides to position and style the thumbnail pager correctly.
```html
```
--------------------------------
### HTML Structure for Multiple Sliders
Source: https://bxslider.com/examples/multiple-slideshows
Defines the unordered lists used as targets for the bxSlider instances, including basic CSS reset for list padding and margins.
```html
Slideshow 1
Slideshow 2
```
--------------------------------
### Basic bxSlider HTML Structure
Source: https://bxslider.com/examples/custom-next-prev-selectors
The fundamental HTML structure required for a bxSlider instance. It uses an unordered list where each list item represents a slide. Custom controls are linked via spans with specific IDs.
```html
This div is outside of the slider
|
```
--------------------------------
### HTML Structure for bxSlider
Source: https://bxslider.com/examples/image-slideshow-captions
Defines the container and slide elements for the gallery. The title attribute on images is used for captions.
```html
```
--------------------------------
### HTML Structure for bxSlider
Source: https://bxslider.com/examples/carousel-static-number-slides
The bxSlider carousel requires an unordered list with the class 'bxslider'. Each list item represents a slide.
```html
```
--------------------------------
### Infinite carousel with odd slide count
Source: https://bxslider.com/examples/carousel-demystified
Configures an infinite carousel with specific slide dimensions and movement increments.
```javascript
$(document).ready(function(){
$('.slider5').bxSlider({
slideWidth: 300,
minSlides: 3,
maxSlides: 3,
moveSlides: 3,
slideMargin: 10
});
});
```
--------------------------------
### Handle Insufficient Slides
Source: https://bxslider.com/examples/carousel-demystified
Demonstrates behavior when the number of slides provided is less than the minSlides requirement. The carousel automatically adjusts the minSlides value to match the actual slide count.
```javascript
$(document).ready(function(){
$('.slider7').bxSlider({
slideWidth: 200,
minSlides: 4,
maxSlides: 5,
slideMargin: 10
});
});
```
```html
```
--------------------------------
### Infinite Carousel HTML Structure
Source: https://bxslider.com/examples/carousel-demystified
HTML markup for an infinite carousel containing 10 slides.
```html
```
--------------------------------
### Vertical Carousel Configuration
Source: https://bxslider.com/examples/carousel-demystified
Sets the carousel mode to vertical. Note that maxSlides is ignored in vertical mode as only one slide is displayed at a time.
```javascript
$(document).ready(function(){
$('.slider8').bxSlider({
mode: 'vertical',
slideWidth: 300,
minSlides: 2,
slideMargin: 10
});
});
```
```html
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.
