Responsive & Touch-Friendly jQuery Slider/Slideshow Plugin

File Size: 7.47 MB
Views Total: 15170
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive & Touch-Friendly jQuery Slider/Slideshow Plugin

Yet another jQuery slider/slideshow plugin that has the ability to slide any html elements in a responsive & touch-friendly layout.


  • Supports any html elements not just images.
  • Has the ability to slide multiple visible slides at one time.
  • Supports infinite loop and auto-play to create a carousel slider.
  • Easing functions with jQuery easing plugin.
  • Mouse move & touch swipe navigation.
  • Highly configurable via CSS and javascript.
  • Responsive design for any devices with different viewport sizes.
  • Detects when images have been loaded with jQuery imagesLoaded plugin.
  • Easy to implement with plain Html.

More examples:


$ npm install jquery.slideshow --save

# Bower
$ bower install jquery.slideshow --save

Basic Usage:

1. Include the latest jQuery javascript library together with slideshow.js and slideshow.css in the page.

<link rel="stylesheet" href="slideshow.css" />
<script src=""></script>
<script src="slideshow.js"></script>

2. Include the jQuery easing and imagesLoaded plugins in the page (Optional).

<script type="text/javascript" src=".externals/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="externals/jquery.imagesloaded.js"></script>

3. Wrap the html elements you would like to slide in a wrapper.

<div id="demo" class="slideshow">
<div class="wrapper">
<div class="slides">
<div class="slide">
<p>Slide 1</p>
<div class="slide">
<p>Slide 2</p>
<div class="slide">
<p>Slide 3</p>
<div class="slide">
<p>Slide 4</p>

4. Initialize the slider with default settings.

$(document).ready(function() {
var slideshow = new Slideshow({
id: 'demo'

5. All the default settings.

align: 'left',
mode: 'default', //thumb_nails
autoplay: false,
autoplay_start_delay : 0,
callback: null,
displayTime: 3000,
easing: 'swing',
id: null,
startingSlideNumber: 1,
visibleSlidesCount: 1,
slideTab_has_value: false,
transition_delay: 500,
preload_images: false,
loop: false,
variableHeight: false,
variableWidth: true,
role : '',
loader_image : 'img/loader.gif',
multiple_slides: false,
slide_margin_right : 0, //percent only used when multiple slides are displayed and slideshow has variable width
align_buttons: function() {
  //center align buttons
  var btn_h = $slideshow.find('.next').height();
  $slideshow.find('.prev, .next').css('top', (slideHeight() - btn_h)/2);

Change log:



  • added bower & npm support.


  • bug fix for wrong width due to display of browser scrollbar


  • bug fix


  • removed pngs and added svg for arrow


  • added support for json data


  • bug fix for safari


  • removed absolute positioning so slide height shouldn't be set with js anymore


  • fix for hidden slideshows
  • added console warning for missing stylesheet


  • added z-index for buttons and a new property called isInitialized


  • added mode option for thumbnails


  • refactored js and various optimizations

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