Responsive & Touch-Friendly jQuery Slider/Slideshow Plugin

File Size: 7.47 MB
Views Total: 15266
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.

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:

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

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.