This time I will share jQuery Plugin and tutorial about 3D Card Rotator/Carousel With jQuery And CSS3 – Card Slider, hope it will help you in programming stack.
A mobile-friendly 3D card slider/rotator/carousel plugin designed for presenting logos, products, favorite images, etc.
The card slider enables the user to rotate through a group of stacked cards by clicking/tapping the sibling slides.
How to use it:
1. Link to jQuery library and the jQuery Card Slider plugin’s files.
1 |
<link href="dist/css/style.css" rel="stylesheet"> |
3 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
4 |
crossorigin="anonymous"> |
6 |
<script src="dist/js/card-slider-min.js"></script> |
2. Add images to the card slider.
01 |
<div id="slider" class="ui-card-slider"> |
3. Call the function on the top container to initialize the card slider.
1 |
$('#slider').cardSlider({ |
4. Specify the initial slide. Default: 1.
1 |
$('#slider').cardSlider({ |
5. Create an element to display the current slide.
1 |
<div class="slider-content" data-index="0">1</div> |
2 |
<div class="slider-content" data-index="1">2</div> |
3 |
<div class="slider-content" data-index="2">3</div> |
4 |
<div class="slider-content" data-index="3">4</div> |
5 |
<div class="slider-content" data-index="4">5</div> |
6 |
<div class="slider-content" data-index="5">6</div> |
1 |
$('#slider').cardSlider({ |
4 |
followingClass: 'slider-content' |
6. Callback functions available.
01 |
$('#slider').cardSlider({ |
04 |
onBeforeMove: function(slider, onMove) { |
05 |
console.log('onBeforeMove') |
08 |
onMove: function(slider, onAfterMove) { |
11 |
onAfterMove: function() { |
12 |
console.log('onAfterMove') |
14 |
onAfterTransition: function() { |
15 |
console.log('onAfterTransition') |
17 |
onCurrent: function() { |
18 |
console.log('onCurrent') |
This awesome jQuery plugin is developed by jeromedupuis. For more Advanced Usages, please check the demo page or visit the official website.
