支持移动手机的多功能响应式jQuery幻灯片插件

zenith-slider是一款支持移动手机的多功能响应式jQuery幻灯片插件。该幻灯片插件不同于其它幻灯片的地方是使用不同的布局来提高网页或app的性能，你还可以在参数中通过CSS来自定义幻灯片的样式。它的特点有：

• 为不同的设备内置了4种不同的布局效果：default, hand, screen, slider
• 响应式设计和完全支持移动触摸事件。
• 使用基于animate.css的CSS3动画特效。
• 支持自动播放模式，鼠标悬停时暂停播放。
• 支持圆点导航，箭头导航和缩略图导航。
• 提供大量的参数选项和回调函数。

使用方法

使用该幻灯片插件需要引入下面的一些依赖文件。

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
<script src="js/jquery-min.js"></script>
<script src="js/zenith.js"></script>                
              

HTML结构

Default布局的HTML结构如下：

<div id="demo" class="tf_slider">       
    
  <div class="tf_container">
      <div class="tf_slide">Item 1</div>  
      <div class="tf_slide">Item 2</div> 
      <div class="tf_slide">Item 3</div> 
      <div class="tf_slide">Item 4</div> 
      <div class="tf_slide">Item 5</div> 
      ...
 
      <span id="left"></span>
      <span id="right"></span>
      <div id="bullet-navs"></div>
  </div>    

</div>               
              

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该幻灯片插件。

$('#element').zenith();                
              

配置参数

通用配置参数

下面的参数适用于所有的幻灯片布局。其它每个布局的独有配置参数在后面列出。

Default布局和Hand布局配置参数

Screen布局配置参数

Slider布局配置参数

事件

下面是一些可用的回调函数。