Lightweight Responsive jQuery Image Slider Plugin - QueueSlider

Lightweight Responsive jQuery Image Slider Plugin - QueueSlider
File Size: 537 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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=""></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.

/* Required QueueSlider CSS */

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.

(function($) {
$(window).bind('load', function() {
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
previous: 'Previous', // Previous button text

5. Public 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)

Change logs:


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