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