CSS3 Animated Card Slider Plugin With jQuery - cardSlider

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

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">
  <ul>
    <li>Card 1</li>
    <li>Card 2</li>
    <li>Card 3</li>
    ...
  </ul>
</div>

4. Initialize the card slider with default options.

$('.my-slider').cardslider()

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

$('.my-slider').cardslider({

  // 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
    }).data('cardslider');

// slide to next card
cardslider.nextCard()

// slide to previous card
cardslider.prevCard()

// Slide to given index or strings('first', 'last')
cardslider.changeCardTo('last');

// destroy the plugin
cardslider.destroy()

Change log:

2017-06-24

  • only select direct childs of the cardslider ul

2017-04-16

  • only show a specific amount of cards

2016-12-22

  • fixed destroy function

2016-10-31

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

2016-10-26

  • added support for card looping

2016-09-14

  • v1.0.3

2016-09-10

  • 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.