🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

QueueSlider is a compact jQuery image slider plugin that supports sliding multiple images with different widths at a time, and has the ability to highlight the centered image by using fade opacity.

Image-Slider

Documentation

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


You May Also Like