Lightweight Adaptive Card Slider Plugin For jQuery - tcg-cardslider.js
File Size: | 12.6 KB |
---|---|
Views Total: | 1248 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

tcg-cardslider.js is a lightweight jQuery plugin used for creating card-style content slider that automatically adjusts the height based on the inner content. Works on modern browsers which support CSS3 transition and transform properties. Useful for content/image carousel or form wizard slider.
How to use it:
1. Load the jQuery tcg-cardslider.js plugin's JavaScript and CSS files after loading jQuery library.
<link rel="stylesheet" href="jquery.tcg-cardslider.min.css"> <script src="jquery-3.1.0.slim.min.js"></script> <script src="jquery.tcg-cardslider.js"></script>
2. Add custom slides to the slider.
<div class="slides"> <div class="slide"> <p>1</p> </div> <div class="slide"> <p>2</p> </div> <div class="slide"> <p>3</p> </div> </div>
3. Initialize the plugin and we're done.
$('.slides').cardslider();
4. You're able to create custom slider controls which allows the user to slide to a specified slide/step manually.
<button type="button" class="toggle-slide" data-step="1">1</button> <button type="button" class="toggle-slide" data-step="2">2</button> <button type="button" class="toggle-slide" data-step="3">3</button>
$('.toggle-slide').click(function(e){ $('.slides').cardslider('select', $(this).data('step')); })
This awesome jQuery plugin is developed by thecodegecko. For more Advanced Usages, please check the demo page or visit the official website.