3D Card Rotator/Carousel With jQuery And CSS3 - Card Slider

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.

<link href="dist/css/style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="dist/js/card-slider-min.js"></script>

2. Add images to the card slider.

<div id="slider" class="ui-card-slider">
  <div class="slide">
    <img src="https://source.unsplash.com/626x626/?fitness">
  </div>
  <div class="slide">
    <img src="https://source.unsplash.com/626x626/?people" />
  </div>
  <div class="slide">
    <img src="https://source.unsplash.com/626x626/?beauty" />
  </div>
  <div class="slide">
    <img src="https://source.unsplash.com/626x626/?bikini" />
  </div>
  <div class="slide">
    <img src="https://source.unsplash.com/626x626/?holiday" />
  </div>
  <div class="slide">
    <img src="https://source.unsplash.com/626x626/?swim" />
  </div>
</div>

3. Call the function on the top container to initialize the card slider.

$('#slider').cardSlider({
  slideTag: 'div', 
  slideClass: 'slide'
})

4. Specify the initial slide. Default: 1.

$('#slider').cardSlider({
  slideTag: 'div', 
  slideClass: 'slide',
  current: 2
})

5. Create an element to display the current slide.

<div class="slider-content" data-index="0">1</div>
<div class="slider-content" data-index="1">2</div>
<div class="slider-content" data-index="2">3</div>
<div class="slider-content" data-index="3">4</div>
<div class="slider-content" data-index="4">5</div>
<div class="slider-content" data-index="5">6</div>

$('#slider').cardSlider({
  slideTag: 'div', 
  slideClass: 'slide',
  followingClass: 'slider-content'
})

6. Callback functions available.

$('#slider').cardSlider({
  slideTag: 'div', 
  slideClass: 'slide',
  onBeforeMove: function(slider, onMove) {
    console.log('onBeforeMove')
    onMove()
  }, 
  onMove: function(slider, onAfterMove) {
    onAfterMove()
  }, 
  onAfterMove: function() {
    console.log('onAfterMove')
  }, 
  onAfterTransition: function() {
    console.log('onAfterTransition')
  }, 
  onCurrent: function() {
    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.