当前位置:JS特效 » 幻灯片和轮播图 » jquery和CSS3响应式轮播图插件jcSlider
 jquery和CSS3响应式轮播图插件jcSlider
如果您觉得内容不错,请分享:

插件介绍

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

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:128
简要教程

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

安装

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

bower install jcslider --save 
npm install jcslider --save          
                

使用方法

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

                


                
HTML结构

jcslider轮播图的HTML结构如下:

  • [...]
  • [...]
初始化插件

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

                
                

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

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

jcSlider响应式jquery轮播图插件的github网址为:https://github.com/JoanClaret/jcSlider

Top