如何使用Unslider
-
引入jQuery 和 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 saystrue
, 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>
-
准备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).$(function() { $('.banner').unslider(); });