FlexSlider 是一款功能强大的响应式 jQuery 幻灯片插件。该幻灯片插件可以制作为带缩略图模式,旋转木马模式等。它可以自适应屏幕大小,并可以制作多种幻灯片过渡特效。它的兼容性强,可以兼容 IE7+的现代浏览器。它的特点还有:
支持多种幻灯片模式
支持 iOS 滑动手势
支持回调函数 API
支持多种 CSS3 动画过渡效果
有额外的旋转木马选项
大量的配置参数
多种主题
该幻灯片最基本的 HTML 结构如下:
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/1.jpg" />
</li>
<li>
<img src="images/2.jpg" />
</li>
<li>
<img src="images/3.jpg" />
</li>
<li>
<img src="images/4.jpg" />
</li>
</ul>
</div>
在页面加载完毕之后,可以通过下面的方法来初始化该 FlexSlider 幻灯片插件。
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
配置参数
namespace:namespace 是有插件产生的元素的 CSS 名称的前缀。
默认值:"flex-"
接收值:String
<!-- Example generated elements -->
<ul class="flex-control-nav flex-paging">
<li><a class="flex-active" href="#"></li>
...
</ul>
提示:namespace 也可以是一个空白符,这会去除掉前缀。
selector:用于选择幻灯片容器和 slide 的选择器。这个选择器必须是以下模式:'{container} > {slide}'。
默认值:".slides > li"
接收值:selector
// FlexSlider setup using custom selector
$(".slider").flexslider({
selector: ".tabs > .tab"
});
<div class="slider">
<div class="tabs">
<div class="tab"> ... </div>
<div class="tab"> ... </div>
<div>
</div>
animation:slider 的动画类型。目前只支持 2 种动画:fade 和 slide。
默认值:"fade"
接收值:"fade" 或 "slide"
你可以考虑在移动触摸设备中使用淡入淡出模式,下面的代码使用 Modernizr 来检测 touch 事件是否可用。
$(".flexslider").flexslider({
animation: Modernizr.touch ? "slide" : "fade"
});
easing:该参数允许使用 jQuery easing。默认是由 jQuery 提供的“swing”和“linear”,你可以通过引入 jQuery Easing plugin 来使用更多的动画过渡效果。注意,如果你选择一个不存在的 easing 效果,插件可能会崩溃。
默认值:"swing"
接收值:String
注意:你需要设置 useCCS: false 来强制在支持 translate3d 的浏览器执行过渡动画。
direction:幻灯片的方向。支持"horizontal"和"vertical"2 种方向。在淡入淡出效果中不能使用这个参数。
默认值:"horizontal"
接收值:horizontal 或 vertical
注意:垂直幻灯片的图片高度必须相等。
reverse:该参数决定幻灯片是从左向右运动还是从右向左运动。
默认值:"false"
接收值:Boolean
animationLoop:幻灯片是否无缝无限循环。如果设置为 false,directionNav 将会在结尾处添加.flex-disableclass。
默认值:"true"
接收值:Boolean
smoothHeight:该参数允许在不同高度的图片之间平滑过渡。在水平淡入淡出幻灯片上无效果。
默认值:"false"
接收值:Boolean
startAt:幻灯片的开始位置。0 是第一张幻灯片。
默认值:0
接收值:Number
slideshow:幻灯片是否自动播放。
默认值:true
接收值:Boolean
slideshowSpeed:幻灯片的切换速度,单位毫秒。
默认值:600
接收值:Number
提示:如果你使用一个很慢的速度(>=700),可以考虑在移动触摸设备上使用一个较快的速度,这会使动画过渡更加平滑。
$(".flexslider").flexslider({
animation: "slide",
animationSpeed: Modernizr.touch ? 400 : 1000
});
initDelay:初始化延迟时间,单位毫秒。
默认值:0
接收值:Number
randomize:在幻灯片初始化时打乱图片的顺序。
默认值:false
接收值:Boolean
pauseOnAction:pauseOnAction 是幻灯片自动播放模式的二级控制。它会在鼠标滑过幻灯片时暂停播放,离开时重新播放。
默认值:false
接收值:Boolean
useCSS:useCSS 决定在 CSS transitions 可用时是否使用它们。
默认值:true
接收值:Boolean
touch:允许幻灯片使用 touch-swipe 事件。
默认值:true
接收值:Boolean
video:使用视频。Translate3D 在视频上使用时会有一些 bug,所以开启该参数会禁用 CSS transitions,而改用 jQuery transitions。
默认值:false
接收值:Boolean
controlNav:用于动态创建幻灯片导航元素。在 controlNav 中传入 thumbnails 参数会动态创建缩略图导航。
默认值:true
接收值:Boolean 或"thumbnails"
缩略图的结构如下:
<!-- Example markup for using the thumbnails pattern -->
<div class="flexslider">
<ul class="slides">
<li data-thumb="image/path.jpg">
<!-- slide content -->
</li>
<li data-thumb="image/path.jpg">
<!-- slide content -->
</li>
<li data-thumb="image/path.jpg">
<!-- slide content -->
</li>
</ul>
</div>
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!