Questions tagged [unslider]

Cross-browser happy

Unslider’s been tested in all the latest browsers, and it falls back magnificently for the not-so-latest ones.

Keyboard support

If you want to, you can add keyboard arrow support. Try it: hit left and right arrow keys.

Adjusts for height

Not all slides are created equal, and Unslider knows it. It’ll stylishly transition heights with no extra code.

Yep, it’s responsive

You’ll be hard pressed to find a site that’s not responsive these days. Unslider’s got your back.

How to use Unslider

• Include jQuery and Unslider

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.min.js"></script>

• Ready your HTML

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>

• Make it pretty

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; }

• Plug it all together

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).