QueueSlider – jQuery slider plugin for variable width images

Download   Demo
This Jquery Plugin QueueSlider is another jQuery slider plugin for variable width images.

Supported Browsers

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

1. INCLUDE JS FILES

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="jquery-1.11.0.min.js"><\/script>')</script> <script src="../jquery.queueslider.min.js"></script>

2. HTML

<div id="qs1" class="queueslider">   <ul class="queue">     <li><img src="images/img1.jpg" alt="Entering Louisville, KY" /></li>     <li><img src="images/img2.jpg" alt="Bridges" /></li>     <li><img src="images/img3.jpg" alt="Chicago, IL from Grant Park" /></li>     <li><img src="images/img4.jpg" alt="Bridge in Chicago, IL" /></li>   </ul> </div>

3. JAVASCRIPT

(function($) {   $(window).bind('load', function() {     $('div#qs1').queueSlider();   }); }(jQuery));

4. OPTIONS

{   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 }

5. METHODS
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');

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});

6. 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.
});