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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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.

<style>
/* 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 button.next {
right: 0;
}
</style>

4. Initialize the image slider with optional settings.

<script>
(function($) {
$(window).bind('load', function() {
$('div#demo').queueSlider({
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
});
});
}(jQuery));
</script>

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

Change logs:

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.