jQuery Flickerplate 幻灯片

阅读更多

Flickerplate 是个轻量级 jQuery 插件,大小仅为 12 kb。它允许用户点击鼠标然后转换内容,非常容易使用,响应式,支持触摸设备

在线实例

默认 圆点导航位置 动画方式 深色主题 HTML data属性

使用方法

  1.  class="flicker-example"> 
  2.     
       
    •          data-background="img/field.jpg"> 
    •              class="flick-title">Flickerplate
 
  •              class="flick-sub-text">——小巧的jQuery幻灯片插件
  •  
  •         
  •  
  •          data-background="img/forest.jpg"> 
  •              class="flick-title">可修改 Javascript 或 CSS
  •  
  •              class="flick-sub-text">查看参数,看看如何修改成你需要的效果
  •  
  •         
  •  
  •          data-background="img/frozen-water.jpg"> 
  •              class="flick-title">触摸事件
  •  
  •              class="flick-sub-text">引入 jQuery Finger 插件可支持移动设备触摸事件
  •  
  •         
  •  
  •      
  • 复制
    1. $(function() { 
    2.     $('.flicker-example').flicker(); 
    3. });
    复制

    参数详解

    参数 描述 默认值
    arrows 显示左右箭头控制 true
    arrows_constraint 左右到头了禁止点击 false
    auto_flick 自动播放 true
    auto_flick_delay 自动播放间隔,以秒为单位 10
    block_text 文字显示背景阴影 true
    dot_navigation 显示圆点导航 true
    dot_alignment 圆点导航位置 center
    flick_animation 动画切换方式,可选 transition-slide、transform-slide、jquery-slide、scroller-slide 4种 transition-slide

    flick_position

    inner_width

    theme 设置主题,可选 light、dark 2种 light

    下载

     

    你可能感兴趣的:(jQuery,Flickerplate,幻灯片)