Giter Club home page Giter Club logo

slippy's Introduction

jQuery slippy v1.0.0

Description

This is a jQuery carousel plugin that offers infinite width and auto height capabilities to the carousel.

Table of Contents

Options & API

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


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:

(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)

slippy's People

Watchers

James Cloos avatar Larry Gordon avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.