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