Another jQuery slider plugin for variable width images.
JavaScript HTML CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
.editorconfig
.gitignore
Gruntfile.js
README.md
bower.json
jquery.queueslider.js
jquery.queueslider.min.js
package.json
queueslider.jquery.json

README.md

QueueSlider v1.2.5

QueueSlider is another jQuery slider plugin for variable width images.

Download

Download the production version or the development version.

Default Settings Object

{
  mode: 'horizontal',     // Use horizontal or fade
  alignMode: 'center',    // Use center, left, or right to align the slider
  delay: 0,               // Delay the start of slider
  fade: 0.3,              // Opacity of images not being viewed, use -1 to disable
  transitionSpeed: 700,   // fade and slide transition speed in milliseconds
  speed: 7000,            // auto-play speed in milliseconds, use 0 to disable
  direction: 1,           // 1 for auto-play forward, -1 for auto-play in reverse
  offScreen: false,       // Set to true for a full screen slider
  autoHeight: false,      // Adjust slider height for each slide
  touchEnabled: true,     // Allow touch interaction with the slider
  swipeThreshold: 50,     // Amount of pixels a touch swipe needs to exceed in order to slide
  buttons: true,          // Enable Previous/Next buttons
  keyboardButtons: true,  // Enable keyboard right/left buttons to advance slides
  previous: 'Previous',   // Previous button text
  next: 'Next'            // Next button text
}

Public Functions

First, initialize and save the QueueSlider to a variable.

var $slider = $('.queueslider').queueSlider({
  speed: 2000,
  buttons: false
});

getState(property)

Get the state of the QueueSlider. Available options are:

  • initialized (boolean)
  • playing (boolean)
  • busy (boolean)
  • count (number)
  • index (object)
  • index.active (number)
  • index.previous (number)
  • viewport (object)
  • viewport.width (number)
$slider.data('queueslider').getState('index.active');

pause()

Pause the slider.

$slider.data('queueslider').pause();

nextSlide()

Go to the next slide.

$slider.data('queueslider').nextSlide();

previousSlide()

Go to the previous slide.

$slider.data('queueslider').previousSlide();

goToSlide(index)

Go to a specific slide index (zero-based).

$slider.data('queueslider').goToSlide(3);

destroy()

Destroy the slider.

$slider.data('queueslider').destroy();

rebuild(options)

Rebuild the slider. Optionally, pass in a new settings object.

$slider.data('queueslider').rebuild({direction: -1});

Events

slideStart

Triggered before the slider starts the transition to the new slide.

$slider.bind('slideStart', function(e, index) {
  console.log(e); // The event object.
  console.log(index); // The index of the new slide.
});

slideEnd

Triggered after the slider transitions to the new slide.

$slider.bind('slideEnd', function(e, index) {
  console.log(e); // The event object.
  console.log(index); // The index of the new slide.
});

Supported Browsers

  • Chrome (latest version)
  • Internet Explorer (6+)
  • Firefox (latest version)
  • Safari (latest version)

Changelog

  • 11.28.14 - v1.2.5 - 6.526kb
    • Add pause() public function.
  • 11.15.14 - v1.2.4 - 6.484kb
    • Fix busy state and slide position reset
  • 10.12.14 - v1.2.3 - 6.435kb
    • Fix scope issues
  • 10.12.14 - v1.2.2 - 6.408kb
    • Add left/right arrow keyboard support
  • 05.09.14 - v1.2.1 - 6.226kb
    • Use Semantic Versioning and submit to jQuery Plugin Registry
  • 02.26.14 - v1.2.0 - 5.377kb
    • Public functions, events, and cleaned up code
  • 01.29.14 - v1.1.0 - 3.371kb
    • Added touch support
  • 08.19.11 - v1.0.0 - 2.183kb
    • Initial release

License

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

Author

Daniel Korte
Web Developer
TOKY Branding + Design
Saint Louis, MO

toky.com
danielkorte.com