jcSlider是一款效果非常炫酷的支持多种动画特效的响应式jQuery幻灯片插件。该幻灯片插件的文件体积效果，支持各种HTML元素，并且可以使用内置的60多种CSS3动画效果来制作幻灯片的过渡动画。它的特点还有：

只有一个js文件

js文件压缩后只有1kb大小

响应式设计

支持超过60种CSS3动画效果

支持各种HTML元素：文本，图片等等

安装

你可以使用bower或npm来安装该幻灯片插件。

bower install jcslider --save

npm install jcslider --save

使用方法

在页面中引入jQuery和jquery.jcslider.min.js以及animate.min.css文件。

HTML结构

该幻灯片的基本HTML结构如下：

• [...]

• [...]

初始化插件

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

$(document).ready(function(){

$('.jc-slider').jcSlider();

});

或者在初始化时配置一些自定义参数：

$(document).ready(function(){

$('.jc-slider').jcSlider({

animationIn : "bounceInRight",

animationOut : "bounceOutLeft",

stopOnHover : false, // 默认值为true

loop : false // 默认值为true

});

});

可用的CSS3动画效果

bounce

flash

pulse

rubberBand

shake

swing

tada

wobble

jello

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flipInX

flipInY

flipOutX

flipOutY

lightSpeedIn

lightSpeedOut

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

hinge

rollIn

rollOut

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

slideInDown

slideInLeft

slideInRight

slideInUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp