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