jQuery bxSliderExtreme v3.1.1

Description

This is a fork of jQuery bxSlider v3.1 that adds an Infinite Width and Auto Height capabilities to the carousel. jQuery bxSlider v3.1 is a fork of the original bxSlider v3.0 library by Steven Wanderski.

Table of Contents

• Options & API
• Release Notes
• Credits
• License

Options & API

Original documentation provided by: http://bxslider.com/options.

• General
• Auto
• Pager
• Multiple display
• Ticker
• Infinite Width
• Auto Height
• Callbacks
• Public functions

---

GENERAL

mode
Type of transition between each slide

default: 'horizontal'
options: 'horizontal', 'vertical', 'fade'

speed
In ms, duration of time slide transitions will occupy

default: 500

infiniteLoop
Display the first slide successively after the last

default: true
options: true, false

controls
Display previous and next controls

default: true
options: true, false

prevText
Text displayed for 'previous' control

default: 'prev'
options: string

prevImage
Filepath of image used for 'previous' control. ex: 'images/prev.jpg'

default: ''
options: string

prevSelector
jQuery selector - element to contain the previous control. ex: '#prev'

default: ''
options: valid jQuery selector

nextText
Text displayed for 'next' control

default: 'next'
options: string

nextImage
Filepath of image used for 'next' control. ex: 'images/next.jpg'

default: ''
options: string

nextSelector
jQuery selector - element to contain the next control. ex: '#next'

default: null
options: valid jQuery selector

startingSlide
Show will start on specified slide. Note: slides are zero based

default: 0
options: integer

randomStart
If true show will start on a random slide

default: false
options: true, false

hideControlOnEnd
If true, will hide 'next' control on last slide and 'prev' control on first

default: false
options: true, false

captions
Display image captions (reads the image 'title' attribute)

default: false
options: true, false

captionsSelector
jQuery selector - element to contain the captions. ex: '#captions'

default: null
options: valid jQuery selector

wrapperClass
Classname attached to the slider wrapper

default: 'bx-wrapper'
options: string

easing
Used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options

default: 'swing'

(back to top)

---

AUTO

auto
Make slide transitions occur automatically

default: false
options: true, false

pause
In ms, the duration between each slide transition

default: 3000
options: integer

autoControls
Display 'start' and 'stop' controls for auto show

default: false
options: true, false

autoControlsSelector
jQuery selector - element to contain the auto controls. ex: '#auto-controls'

default: null
options: valid jQuery selector

startText
Text displayed for 'start' control

default: 'start'
options: string

startImage
Filepath of image used for 'start' control. ex: 'images/start.jpg'

default: ''
options: string

stopText
Text displayed for 'stop' control

default: 'stop'
options: string

stopImage
Filepath of image used for 'stop' control. ex: 'images/stop.jpg'

default: ''
options: string

autoDelay
In ms, the amount of time before starting the auto show

default: 0
options: integer

autoDirection
Direction in which auto show will traverse

default: 'next'
options: 'next', 'prev'

autoHover
If true show will pause on mouse over

default: false
options: true, false

autoStart
If false show will wait for 'start' control to be clicked to activate

default: true
options: true, false

(back to top)

---

PAGER

pager
Display a numeric pager

default: false
options: true, false

pagerType
If 'full', pager displays 1,2,3... If 'short' pager displays 1 / 4

default: 'full'
options: 'full', 'short'

pagerSelector
jQuery selector - element to contain the pager. ex: '#pager'

default: null
options: valid jQuery selector

pagerLocation
Location of pager

default: 'bottom'
options: 'bottom', 'top'

pagerShortSeparator
Characters used in between 'short' pager numbers. Ex: value 'of' would display 1 of 4

default: '/'
options: string

pagerActiveClass
Classname attached to the active pager link

default: 'pager-active'
options: string

(back to top)

---

MULTIPLE DISPLAY

displaySlideQty
Number of slides to display at once

default: 1
options: integer

moveSlideQty
Number of slides to move at once

default: 1
options: integer

(back to top)

---

TICKER

ticker
Continuous motion ticker mode (similar to a news ticker)

default: false
options: true, false

tickerSpeed
Use a value between 1 and 5000 to determine ticker speed - the smaller the value the faster the ticker speed

default: 5000
options: integer

tickerDirection
Direction in which ticker show will traverse

default: 'next'
options: 'next', 'prev'

tickerHover
If true ticker will pause on mouseover

default: false
options: true, false

(back to top)

---

INFINITE WIDTH

infiniteWidth
Make the carousel resize to the browsers width. Requires jquery.debouncedresize.js if infiniteWidth == true. Get it here: https://github.com/louisremi/jquery-smartresize

default: false
options: true, false

minWidth
The minimum width of the carousel

default: 960

widthSpeed
In ms, duration of time infinite width transitions will occupy

default: 400
preferred: 600

widthEasing
Used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options

default: 'swing'
preferred: 'easeOutQuint'

(back to top)

---

AUTO HEIGHT

autoHeight
Set the height of the carousel to the height of the current slide

default: false
options: true, false

minHeight
The minimum height of the carousel. Must be set if autoHeight == true

default: 0

heightSpeed
In ms, duration of time height transitions will occupy

default: 1000
preferred: 1200

heightEasing
Used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options

default: 'swing'
preferred: 'easeInOutQuint'

(back to top)

---

CALLBACKS

onBeforeSlide
Performs provided function before every slide transition

function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
  // perform actions here
}

onAfterSlide
Performs provided function after every slide transition. Note: function will be performed on slider initialization

function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
  // perform actions here
}

onFirstSlide
Performs provided function when the first slide is reached

function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
  // perform actions here
}

onLastSlide
Performs provided function when the last slide is reached

function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
  // perform actions here
}

onPrevSlide
Performs provided function when a 'previous' slide transition is performed

function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
  // perform actions here
}

onNextSlide
Performs provided function when a 'next' slide transition is performed

function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){
  // perform actions here
}

buildPager
Calls provided function on each pager item

function(slideIndex, slideHtmlObject){
  // return output;
}

(back to top)

---

PUBLIC FUNCTIONS

goToSlide(slideIndex)
Got to the specified slide. Note: slide indices are zero based

goToNextSlide()
Go to the next slide

goToPreviousSlide()
Go to the previous slide

goToFirstSlide()
Go to the previous slide

goToLastSlide()
Go to the last slide

getCurrentSlide()
Returns the current slide index

getSlideCount()
Returns the number of total slides

stopShow()
Stops an auto show

startShow()
Starts an auto show

stopTicker()
Stops a ticker show

startTicker()
Starts a ticker show

destroyShow()
Destroys the active slideshow

reloadShow()
Reinitialize a slide show

(back to top)

---

Release Notes

3.1.1 (4/23/2012):

• Forked from jQuery bxSlider v3.1.
• Changed name to bxSliderExtreme.
• Added parameters for:
  • infiniteWidth: Make the carousel resize to the browsers width.
  • minWidth: The minimum width of the carousel.
  • widthSpeed: In ms, duration of time infinite width transitions will occupy.
  • widthEasing: Used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options.
  • autoHeight: Set the height of the carousel to the height of the current slide.
  • minHeight: The minimum height of the carousel.
  • heightSpeed: In ms, duration of time height transitions will occupy.
  • heightEasing: Used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options.
• Fixed an issue that caused the carousel to delay it's slide animation if autoHeight was set to true.
• Fixed a major bug where calling $.slideDown() would cause jQuery to break in IE.

v3.1:

• Fixed an issue where the .bx-next button would not hide if the displaySlideQty was greater than 1.

v3.0:

• Forked from bxSlider v3.0.

(back to top)

Credits

Copyright 2011, Steven Wanderski
http://bxcreative.com

Edited by Larry Gordon
http://blog.psyrendust.com

(back to top)

License

Free to use and abuse under the MIT license.
http://www.opensource.org/licenses/mit-license.php
(back to top)