jQuery Sliders Web Programming

Full Width Responsive Image Slider with jQuery – Slippry

Slippry is a full width Responsive Image Slider with HTML5 + CSS3 + jQuery. Slippry is created with latest jQuery functions, CSS3 tricks and HTML5 elements with gracefull downgrades for older browsers. It can be styled with Sass or CSS and has multiple transition options including Ken Burns effect.

Detailed documentation on the website settings page.


Slippry is a pretty customisable slider,  some random combinations of options and the function settings and CSS (if applicable) to recreate them.


Download Slippry Slider (.zip)

Installation of Slippry Slider

Use the following code in your HTML document’s <head> as a starter:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/slippry.min.js"></script>
<link rel="stylesheet" href="/css/slippry.css" />

Write some HTML:

<ul id="slippry-demo">
    <a href="#slide1">
      <img src="images/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>">
    <a href="#slide2">
      <img src="images/image-2.jpg"  alt="This is caption 2">
    <a href="#slide3">
      <img src="images/image-3.jpg" alt="And this is some very long caption for slide 3. Yes, really long.">
    <a href="#slide4">
      <img src="images/image-4.jpg" alt="And this is some very long caption for slide 4.">

Call Slippry slider

Make sure it’s called within $(document).ready()!



Compatibility: All Modern Browsers
Website: http://slippry.com/
Download: https://github.com/booncon/slippry


Enhanced by Zemanta

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.