FlexSlider – 一个超棒的响应式jQuery幻灯片插件

F2EX JavaScript 2016-12-03

jQuery Slider

FlexSlider 是一个超棒的响应式 jQuery 幻灯片插件。它拥有多个特性：1.简单，语义标记。2.支持所有主流浏览器。3.水平/垂直滑动和淡出动画。4.多个幻灯片支持，回调 API 等。5.硬件加速触摸滑动支持。6.自定义导航选项。7.兼容最新版本的 jQuery 。

Website Demo

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` 删除幻灯片后触发。

jQuery Slider

2016-12-20

FlexSlider – 一个超棒的响应式jQuery幻灯片插件

HTML

JS

高级选项

相关推荐

Hammer.js – 用于多点触摸手势的JavaScript库

Chart.js – 简单而灵活的JavaScript图表

Smooth Anchor Scrolling – 平滑滚动锚点

Creative Loading Effects – 13个创意网站loading效果