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.

Features:

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

• Minimal
• with image preloading
• auto-generated tabs (bullets)
• labeled tabs
• thumbnails
• multiple visible slides
• variable height

Installation:

# NPM
$ 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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></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>
<div class="slide">
<p>Slide 2</p>
</div>
<div class="slide">
<p>Slide 3</p>
</div>
<div class="slide">
<p>Slide 4</p>
</div>
</div>
</div>
</div>

4. Initialize the slider with default settings.

<script>
$(document).ready(function() {
var slideshow = new Slideshow({
id: 'demo'
});
});
</script>

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:

2018-02-20

• Update

2018-02-19

• added bower & npm support.

2018-02-12

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

2016-04-26

• bug fix

2016-04-15

• removed pngs and added svg for arrow

2016-04-04

• added support for json data

2016-01-05

• bug fix for safari

2016-01-03

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

2015-12-17

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

2015-12-14

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

2014-03-13

• added mode option for thumbnails

2014-03-12

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