Lightweight Responsive jQuery Image Slider Plugin - QueueSlider

File Size: 537 KB
Views Total: 2649
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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 {
  right: 0;

4. Initialize the image slider with optional settings.


  // 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

// goto the next slide

// goto the previous slide

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

// destroy the slider

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

// Get the state of the QueueSlider.
// initialized (boolean)
// playing (boolean)
// busy (boolean)
// count (number)
// index (object)
// (number)
// index.previous (number)
// viewport (object)
// viewport.width (number)



  • Add pause() public function


  • Fix busy state and slide position reset


  • Fix scope issues


  • Fix fade mode when touch is enabled


  • Add mode and delay options


  • 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.