Lightweight Adaptive Card Slider Plugin For jQuery - tcg-cardslider.js

Lightweight Adaptive Card Slider Plugin For jQuery - tcg-cardslider.js
File Size: 12.6 KB
Views Total:
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">
  <div class="slide">
  <div class="slide">

3. Initialize the plugin and we're done.


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>
  $('.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.