FlexSlider 是一个超棒的响应式 jQuery 幻灯片插件。它拥有多个特性:1.简单,语义标记。2.支持所有主流浏览器。3.水平/垂直滑动和淡出动画。4.多个幻灯片支持,回调 API 等。5.硬件加速触摸滑动支持。6.自定义导航选项。7.兼容最新版本的 jQuery 。
HTML
<!-- 放置在网页的任何地方 -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
<li>
<img src="slide4.jpg" />
</li>
</ul>
</div>
JS
// 也可以使用 $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
高级选项
属性 | 默认 | 描述 |
---|---|---|
namespace |
"flex-" |
String 前缀字符串附加到插件生成的所有元素的类。 |
selector |
".slides > li" |
Selector 选择器必须匹配一个简单的模式。 '{container} > {slide}' |
animation |
"fade" |
String 控制动画类型, "fade" 或 "slide" |
easing |
"swing" |
String 使用 jQuery 动画。 |
direction |
"horizontal" |
String 控制动画方向, "horizontal" or "vertical" |
reverse |
false |
Boolean 反转动画方向。 |
animationLoop |
true |
Boolean 给幻灯片一个无缝的无限循环。 |
smoothHeight |
false |
Boolean 为不同高度的幻灯片平滑滑动滑块的高度。 |
startAt |
0 |
Number 幻灯片的起始滑块,数组符号。 |
slideshow |
true |
Boolean 设置幻灯片以使滑块自动生成动画。 |
slideshowSpeed |
7000 |
Number 设置幻灯片循环的速度(以毫秒为单位)。 |
animationSpeed |
600 |
Number 设置动画的速度,以毫秒为单位。 |
initDelay |
0 |
Number 设置初始化延迟,以毫秒为单位。 |
randomize |
false |
Boolean 加载时,随机化幻灯片顺序。 |
pauseOnAction |
true |
Boolean 在与控件元素交互时暂停幻灯片。 |
pauseOnHover |
false |
Boolean 当(鼠标)悬停在幻灯片上时暂停幻灯片放映,然后在不再悬停时继续播放。 |
useCSS |
true |
Boolean 幻灯片使用CSS3过渡,如果可用。 |
touch |
true |
Boolean 启用触摸滑动。 |
video |
false |
Boolean 阻止使用CSS3 3D变换,避免图形不正常。 |
controlNav |
true |
Boolean 为每个幻灯片的分页控制创建导航。 |
customDirectionNav |
"" |
jQuery Object/Selector 容器自定义导航标记。 |
directionNav |
true |
Boolean 创建上一个/下一个箭头导航。 |
prevText |
"Previous" |
String 设置文本 “previous” directionNav |
nextText |
"Next" |
String 设置文本 “next” directionNav |
keyboard |
true |
Boolean 允许幻灯片通过键盘左/右键导航。 |
multipleKeyboard |
false |
Boolean 允许键盘导航影响多个幻灯片。 |
mousewheel |
false |
Boolean 允许幻灯片通过鼠标滚轮导航。 |
pausePlay |
false |
Boolean 创建暂停/播放元素以控制幻灯片。 |
pauseText |
"Pause" |
String 设置文本 “pause” pausePlay |
playText |
"Play" |
String 设置文本 “play” pausePlay |
controlsContainer |
"" |
jQuery Object/Selector 应该附加导航元素的容器。 |
manualControls |
"" |
jQuery Object/Selector 定义要用来代替动态的元素 controlNav 。 |
sync |
"" |
Selector 使用另一个幻灯片镜像此幻灯片上执行的操作。 |
asNavFor |
"" |
Selector 将滑块转换为另一个幻灯片的缩略图导航。 |
itemWidth |
0 |
Number 个别轮播项目的Box-model宽度,包括水平边框和内边距。 |
itemMargin |
0 |
Number 轮播项目之间的边距。 |
minItems |
0 |
Number 应显示的轮播项目最小数量。 |
maxItems |
0 |
Number 应显示的轮播项目的最大数量。 |
move |
0 |
Number 应该在动画上移动的轮播项目数。 |
start |
empty |
Function 当加载第一张幻灯片时触发。 |
before |
empty |
Function 与每个幻灯片异步触发。 |
after |
empty |
Function 每个幻灯片完成后触发。 |
end |
empty |
Function 当到达最后一个幻灯片时触发(异步)。 |
added |
empty |
Function 添加幻灯片后触发。 |
removed |
empty |
Function 删除幻灯片后触发。 |
2016-12-20