FlexSlider是一款功能强大的响应式jQuery幻灯片插件。该幻灯片插件可以制作为带缩略图模式,旋转木马模式等。它可以自适应屏幕大小,并可以制作多种幻灯片过渡特效。它的兼容性强,可以兼容IE7+的现代浏览器。它的特点还有:
该幻灯片最基本的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-disable
class。
默认值:"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>