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.
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.
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.
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" />
<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>
Make sure it's called within $(document).ready()!
jQuery(document).ready(function(){
jQuery('selector').slippry()
});