FlexSlider - 响应式jQuery幻灯片插件

PetitQ 幻灯片/轮播 2018-11-02 1.91K 0 0

FlexSlider 是一款功能强大的响应式 jQuery 幻灯片插件。该幻灯片插件可以制作为带缩略图模式，旋转木马模式等。它可以自适应屏幕大小，并可以制作多种幻灯片过渡特效。它的兼容性强，可以兼容 IE7+的现代浏览器。它的特点还有：

支持多种幻灯片模式

也想出现在这里？联系我们吧

支持 iOS 滑动手势

支持回调函数 API

支持多种 CSS3 动画过渡效果

有额外的旋转木马选项

大量的配置参数

多种主题

HTML 结构：

该幻灯片最基本的 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

```

```

    <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">

```
          
```
```
        </li>
```

        <li data-thumb="image/path.jpg">

```
          
```
```
        </li>
```

        <li data-thumb="image/path.jpg">

```
          
```
```
        </li>
```
```
      </ul>
```
```
    </div>
```

FlexSlider - 响应式 jQuery 幻灯片插件

已有 477 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

FlexSlider - 响应式jQuery幻灯片插件

HTML 结构：

初始化插件：

FlexSlider - 响应式 jQuery 幻灯片插件

相关文章

jQuery缩略图翻转幻灯片插件

仿优酷三联叠加轮播jQuery焦点图特效

时尚简洁轮播图幻灯片特效插件

发表回复取消回复

热销模板

幻灯片/轮播

HTML 结构：

初始化插件：

FlexSlider - 响应式 jQuery 幻灯片插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复