Responsive

Buzzword? Yes. Important? Very.

We got frustrated at the lack of free, responsive sliders, so we wrote our own. Sure, there are some out there, but we found out the hard way, they have two settings or they use soon-to-be-deprecated functions.

Oops.

Modern

HTML5 + CSS3 + jQuery

Slippry is written with the future in mind, not the past. We wrote it to work on the latest jQuery functions, CSS3 tricks and HTML5 elements. We support death with dignity for technology.

But don't worry, it still downgrades gracefully.

Simple

Or complex. You choose.

Isn't it great when you just need a simple slider? How about when the design needs captions in random places, Reeeeaaallllyyyy slooowwwww speeds or an annoying pop-up each time you change slide? Yeah, not so great.

Slippry offers a heap of settings you actually need, and with the included CSS and Sass you can make Slippry look just how you need it.

Get Started

1
Download (.zip)
2

Link these files

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" />
3

Write some HTML:

<ul id="slippry-demo">
  <li>
    <a href="#slide1"><img src="assets/img/slippry-01.jpg" alt="Welcome to Slippry!"></a>
  </li>
  <li>
    <a href="#slide2"><img src="assets/img/slippry-02.jpg"  alt="This is an awesome jQuery slider plugin."></a>
  </li>
  <li>
    <a href="#slide3"><img src="assets/img/slippry-03.jpg" alt="Check it out, you are going to <span class='red'>♥</span> it :)"></a>
  </li>
</ul>
4

Call Slippry slider

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

jQuery(document).ready(function(){
  jQuery('selector').slippry()
});

Done!

Give your self a pat on the back, then have a tinker with Slippry's settings, have a look at the examples or dig into the CSS and style to your heart's content.