bxslider is a fully responsive jQuery Slider Plugin that allows you to create a content slider which can contain images, video, or HTML content.
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. |