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');
  }
});                
              

配置参数

  • namespacenamespace是有插件产生的元素的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"

    接收值:horizontalvertical

    注意:垂直幻灯片的图片高度必须相等。

  • reverse:该参数决定幻灯片是从左向右运动还是从右向左运动。

    默认值:"false"

    接收值:Boolean

  • animationLoop:幻灯片是否无缝无限循环。如果设置为falsedirectionNav将会在结尾处添加.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

  • pauseOnActionpauseOnAction是幻灯片自动播放模式的二级控制。它会在鼠标滑过幻灯片时暂停播放,离开时重新播放。

    默认值:false

    接收值:Boolean

  • useCSSuseCSS决定在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>