jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画，它可以和animate.css完美结合，生成60多种轮播图过渡动画效果。

在线预览 下载

安装

可以通过npm或bower来安装jcSlider插件。

bower install jc slider --save 
npm install jc slider --save

        

          
        
        
        

          

          AI 代码解读
        
      
      

使用方法

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

<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.3.0/animate.min.css">                
<script src="js/jquery.min.js"></script>
<script src="js/jquery.jcslider.min.js"></script>

        

          
        
        
        

          

          AI 代码解读
        
      
      

HTML结构
jcslider轮播图的HTML结构如下：

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

初始化插件
在页面DOM元素加载完毕之后，通过jcSlider()方法来初始化该jquery轮播图插件。

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

jcSlider轮播图插件的可用配置参数如下：

$(document).ready(function(){
   
    $('.jc-slider').jcSlider({
   
        animationIn     : "bounceInRight",
        animationOut    : "bounceOutLeft", 
        stopOnHover     : false, // true by default
        loop            : false // true by default
    });
});

        

          
        
        
        

          

          AI 代码解读