Unslider’s been tested in all the latest browsers, and it falls back magnificently for the not-so-latest ones.
If you want to, you can add keyboard arrow support. Try it: hit left and right arrow keys.
Not all slides are created equal, and Unslider knows it. It’ll stylishly transition heights with no extra code.
You’ll be hard pressed to find a site that’s not responsive these days. Unslider’s got your back.
To use Unslider, you’ll need to make sure both the Unslider and jQuery scripts are included. If you’ve already got jQuery (you can test by opening your JavaScript console and typing !!window.jQuery
— if it says true
, you have jQuery), you don’t need to add the first line.
<script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="//unslider.com/unslider.js"></script>
Unslider doesn’t need any really awkward markup. In fact, all you need is a div
and an unordered list. An example of some Unslider-friendly HTML is on the right.
You can add as many slides as you want: the example on the right just has three for the sake of brevity, but Unslider won’t work properly with one slide (but then it’s just a box).
<div class="banner"> <ul> <li>This is a slide.</li> <li>This is another slide.</li> <li>This is a final slide.</li> </ul> </div>
You can change, add, and remove as much CSS per slide as you want, but there is a barebones style required by Unslider. It’s on the right (change the class name where .banner is the name of your slider).
.banner { position: relative; overflow: auto; } .banner li { list-style: none; } .banner ul li { float: left; }
We’ve been through so much together, and I’m pleased to say the finish line is near. Our journey is almost over, just one more thing left to do. The JavaScript is on the right (make sure to put it in a script
tag, and change .banner
to whatever your slider’s element is).
$(function() { $('.banner').unslider(); });