支持多种动画特效的响应式jQuery幻灯片插件

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文件。

<script src="js/jquery.min.js"></script>

<script src="jquery.jcslider.min.js"></script>

<!-- animate CSS stylesheet library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css">
              

HTML结构

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

<ul class="jc-slider">
    <li class="jc-animation">
        [...]
    </li>
    <li class="jc-animation">
        [...]
    </li>
</ul>                
              

初始化插件

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

<script type="text/javascript">
    $(document).ready(function(){
        $('.jc-slider').jcSlider();
    });
</script>                
              

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

<script type="text/javascript">
    $(document).ready(function(){
        $('.jc-slider').jcSlider({
            animationIn     : "bounceInRight",
            animationOut    : "bounceOutLeft", 
            stopOnHover     : false, // 默认值为true
            loop            : false // 默认值为true
        });
    });
</script>                
              

可用的CSS3动画效果