CSS3 Animated Card Slider Plugin With jQuery - cardSlider

CSS3 Animated Card Slider Plugin With jQuery - cardSlider
File Size: 30.4 KB
Views Total: 13177
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

cardSlider is a jQuery content slider plugin which allows the users to rotate through a set of html elements with a CSS3 powered card deck style animation.

How to use it:

1. Include the jQuery cardSlider plugin's JavaScript and Stylesheet in the html document. Make sure you first have jQuery library included.

<link href="dist/css/cardslider.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="dist/js/jquery.cardslider.min.js"></script>

2. Include the jQuery jquery.event.move.js and jquery.event.swipe.js plugins for mouse drag & touch swipe support.

<script src="jquery.event.move.js"></script>
<script src="jquery.event.swipe.js"></script>

3. Create a list of html contents for the card slider.

<div class="my-slider">
    <li>Card 1</li>
    <li>Card 2</li>
    <li>Card 3</li>

4. Initialize the card slider with default options.


5. All default options which can be passed as an object to the cardslider() method.


  // keyboard navigation
  keys: {
    next: 38,
    prev: 40

  // 'up', 'down', 'right', 'left'
  direction: 'down',

  // shows navigation
  nav: true,

  // allows swipe event on touch devices
  swipe: false,

  // shows bottom pagination dots
  dots: false,

  // infinite loop
  loop: false,

  // callbacks
  beforeCardChange: null,
  afterCardChange: null

6. Public methods.

var cardslider = $('.my-slider').cardslider({
    // options here

// slide to next card

// slide to previous card

// Slide to given index or strings('first', 'last')

// destroy the plugin

Change log:


  • only select direct childs of the cardslider ul


  • only show a specific amount of cards


  • fixed destroy function


  • updated readme, fixed some javascript issues, optimized javascript code


  • added support for card looping


  • v1.0.3


  • updated css with prefixes
  • main script can now be required via commonjs, added dependencies for swiping

This awesome jQuery plugin is developed by konstantingassmann. For more Advanced Usages, please check the demo page or visit the official website.