如何使用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(); });
相关推荐
unslider插件 滑块插件 轮播插件
jquery轮播插件 unslider.js
unslider非常好用的轮播插件 用法也非常简单,试一试就知道!
一个简单的unslider左右滑动的小demo 对点样式和左右箭头样式做了调整
unslider插件,可以设置滚动速度,间隔,自适应等,使用起来很方便,注意图片设成100%并在js中开启自适应,自适应才好用哦
该文件是 unslider轮播所用到的js,效果挺不错
轮播图使用jquery技术,加入unslider.min.js包来实现。
The jQuery slider that just slides. 就是这个不到3kb的插件!没有奇特的特效或无用的标签。
支持响应式手机端jQuery图片轮播插件unslider,非常强大的jQuery插件,支持响应式手机端 、支持函数回调、支持左右按钮切换,可以自定义是否使用响应式fluid:true/false、是否显示 圆点切换dots:true/false,是否...
unslider插件是一个超小的Jquery...(PS:博主亲测,在IE8上使用正常; 2、支持键盘导航; 3、自动调整高度; 4、支持响应式布局。 最新unslider插件轮播图、轮播插件打开可用、unslider.min.js、jquery-1.11.1.min.js
支持响应式手机端jQuery图片轮播插件unslider,非常强大的jQuery插件,支持响应式手机端 、支持函数回调、支持左右按钮切换,可以自定义是否使用响应式fluid:true/false、是否显示 圆点切换dots:true/false,是否...
滑行 最简单的方法是在几秒钟内启动并运行一个简单的滑块。 您所需要的只是一些有效的标记,jQuery和一些额外CSS,Unslider可以完成其余工作。 查看文档: : 根据许可。
js轮播图插件,代码内含注释,直接使用即可
资源分类:Python库 所属语言:Python 资源全名:collective.unslider-1.3.zip 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
NULL 博文链接:https://gerrard-ok.iteye.com/blog/2075498
yii2-unslider-widget Yii 2 的流畅、灵活、极少的滑块小部件安装将以下内容添加到composer.json require部分: dd3v/yii2-unslider-widget": "*"并运行composer install 。用法 use dd3v\unslider\ Unslider ; echo...
unslider-lt 基于构建,加入可选固定尺寸特性,另有开箱即用的基本样式。 License:
这是一个jquery-ui日期插件,此插件使用简单。
特点:跨浏览器:Unslider已经在所有最新的浏览器上测试过了,并且对那些老旧的浏览器也能很出色的降级处理。支持键盘导航:如果需要,可以加入键盘方向键导航。试一试左右方向键吧!自动调整高度:并不是每个幻灯片都...