Super Simple jQuery Image Slider Plugin with jQuery and CSS3 - Slippry

File Size: 391 KB
Views Total: 9178
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Super Simple jQuery Image Slider Plugin with jQuery and CSS3 - Slippry

Slippry is a simple and easy-to-use jQuery plugin used to create a responsive and customizable image slider with plain simple Html and CSS3.

Features:

  • Responsive. Automatically adapt to your viewport as window's size changed.
  • Allows to control the slides out of the slider.
  • Displays the image captions using img alt attribute.
  • CSS3 transitons, transforms and easing effects supported.
  • Slideshow mode supported.
  • Auto play on load and auto loop supported.
  • Dots or number navigation.
  • Callback events supported.

Basic Usage:

1. Include required Slippry stylesheet file on your web page.

<link rel="stylesheet" href="slippry.css">

2. Add the following Html snippet to the body of your web page.

<ul id="demo">
<li><a href="#slide1"><img src="1.jpg" alt="Image Cation 1"></a></li>
<li><a href="#slide2"><img src="2.jpg"  alt="Image Cation 2"></a></li>
<li><a href="#slide3"><img src="3.jpg" alt="Image Cation 3"></a></li>
</ul>

3. Include jQuery library and jQuery Slippry plugin on your webpage.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="slippry.js"></script>

4. Initialize the slider with options.

<script>
$(function() {
$("#demo").slippry();
});
</script>

5. All the default settings.

// general elements & wrapper

// wrapper to wrap everything, including pager
slippryWrapper: '<div class="sy-box" />', 

// wrapper to wrap sildes & controls
slideWrapper: '<div class="sy-slides-wrap" />', 

//additional wrapper around just the slides
slideCrop: '<div class="sy-slides-crop" />', 

// class that goes to original element
boxClass: 'sy-list', 

// elments cointaining slide content
elements: 'li', 

// class for current slide
activeClass: 'sy-active', 

// class for element that acts as intrinsic placholder
fillerClass: 'sy-filler', 
loadingClass: 'sy-loading',

// options

// height of the sliders adapts to current slide
adaptiveHeight: true, 

// num (starting from 1), random
start: 1, 

// first -> last & last -> first arrows
loop: true, 

// img, el [img takes caption from alt or title, el from title of slide element]
captionsSrc: 'img', 

// Position: overlay, below, custom, false
captions: 'overlay', 

// $ selector for captions wrapper
captionsEl: '.sy-caption', 

// initialise even if there is only one slide
initSingle: true, 
responsive: true,

// visible, all | resources to wait for until showing slider
preload: 'visible', 

// pager
pager: true,
pagerClass: 'sy-pager',

// controls
controls: true,
controlClass: 'sy-controls',
prevClass: 'sy-prev',
prevText: 'Previous',
nextClass: 'sy-next',
nextText: 'Next',
hideOnEnd: true,

// transitions

// fade, horizontal, vertical, kenburns, false
transition: 'fade', 

// max zoom for kenburns (in %)
kenZoom: 120, 

// spacing between slides (in %)
slideMargin: 0, 

// [Class applied to [element] while a transition is taking place.]
transClass: 'transition', 

// time the transition takes (ms)
speed: 800, 

// easing to use in the animation [(see... [jquery www])]
easing: 'swing', 

// seamless first/ last transistion, only works with loop
continuous: true, 

// true, false -> fallback to js if no browser support
useCSS: true, 

//slideshow
auto: true,
autoDirection: 'next',
autoHover: true,
autoHoverDelay: 100,
autoDelay: 500,
pause: 4000,

// callback functions

// when slider loaded
onSliderLoad: function () { 
  return this;
},

// before page transition starts
onSlideBefore: function () { 
  return this;
},

// after page transition happened
onSlideAfter: function () {  
  return this;
}

Change logs:

v1.4.0 (2016-10-07)

  • compaitble with new jQuery, removed Compass, small build refinements

v1.3.0 (2015-08-04)

v1.2.9 (2015-03-11)

  • fixed responsive images without links

v1.2.8 (2015-03-10)

  • path to img resources as option

2014-03-12

  • Fix an IE8 bug.

2013-12-19

  • added vertical translations, preload options

2013-12-16

  • demo page update.
  • fixed issue with Firefox KenBurns CSS animation problems.

2013-11-27

  • added new custom spinner
  • fixed issue with kenburns effect always running when using js for animations

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