Lightweight Responsive jQuery Image Slider Plugin - QueueSlider

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.

How to use it:

1. Load the jQuery javascript library and jQuery queueSlider plugin at the bottom of the document.

<script src="jquery.min.js"></script> 
<script src="jquery.queueslider.min.js"></script> 

2. Create the html for a responsive image slider.

<div id="demo" class="queueslider">
  <ul class="queue">
    <li><img src="images/img1.jpg" alt="Alt 1" /></li>
    <li><img src="images/img2.jpg" alt="Alt 2" /></li>
    <li><img src="images/img3.jpg" alt="Alt 3" /></li>
    ...
  </ul>
</div>

3. Add the required CSS styles listed below in your stylesheet file.

div.queueslider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 350px;
}

div.queueslider ul.queue {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  margin: 0;
  padding: 0;
}

div.queueslider ul.queue li {
  float: left;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

div.queueslider ul.queue li div, div.queueslider ul.queue li img, div.queueslider ul.queue li video, div.queueslider ul.queue li audio {
  margin: 0 auto;
  text-align: left;
}

div.queueslider button {
  z-index: 100;
  position: absolute;
  display: block;
  margin: 0;
  padding: 5px;
  outline: none;
  border: none;
  cursor: pointer;
}

div.queueslider button.previous {
  left: 0;
}

div.queueslider button.next {
  right: 0;
}

4. Initialize the image slider with optional settings.

$('div#demo').queueSlider({

  // Use horizontal or fade
  mode: 'horizontal', 

  // Use center, left, or right to align the slider
  alignMode: 'center',

  // Delay the start of slider
  delay: 0, 

  // Opacity of images not being viewed, use -1 to disable
  fade: 0.3,

  // fade and slide transition speed in milliseconds
  transitionSpeed: 700, 

  // auto-play speed in milliseconds, use 0 to disable
  speed: 7000,

  // 1 for auto-play forward, -1 for auto-play in reverse
  direction: 1, 

  // Set to true for a full screen slider
  offScreen: false, 

  // Adjust slider height for each slide
  autoHeight: false,

  // Allow touch interaction with the slider
  touchEnabled: true, 

  // Amount of pixels a touch swipe needs to exceed in order to slide
  swipeThreshold: 50, 

  // Enable Previous/Next buttons
  buttons: true,

  // Previous button text
  previous: 'Previous'
   
});

5. API methods.

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

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

// goto the next slide
$slider.data('queueslider').nextSlide();

// goto the previous slide
$slider.data('queueslider').previousSlide();

// Go to a specific slide index (zero-based).
$slider.data('queueslider').goToSlide(3);

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

// Rebuild the slider.
// Optionally, pass in a new settings object.
$slider.data('queueslider').rebuild({direction: -1});

// Get the state of the QueueSlider.
// 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');

Changelog:

2014-11-29

• Add pause() public function

2014-11-16

• Fix busy state and slide position reset

2014-10-13

• Fix scope issues

2014-03-05

• Fix fade mode when touch is enabled

2014-03-04

• Add mode and delay options

2014-02-27

• Add goToSlide() public function and event hooks
• Better touch integration and smoother infinite transitions

---

This awesome jQuery plugin is developed by danielkorte. For more Advanced Usages, please check the demo page or visit the official website.