Nice Material Inspried Card Slider with jQuery and CSS3

A simple, nice, Material Design style card slider built with jQuery and CSS that allows to switch any html content with the background color change. It will automatically adjust the slider height depending on the inner content.

How to use it:

1. The html structure for the card slider. You can use the slide-color attribute to specify the background colors for the corresponding slides.

<div class="card">
  <div class="slides">
    <div slide-id="1" slide-color="#D18B49" class="slide active">
      <div class="thumbnail"><img src="1.jpg"/></div>
      <h1 class="title">Slide 1</h1>
      <p class="description">Slide 1 Content</p>
    </div>
    <div slide-id="2" slide-color="#542F13" class="slide">
      <div class="thumbnail"><img src="2.jpg"/></div>
      <h1 class="title">Slide 2</h1>
      <p class="description">Slide 2 Content</p>
    </div>
    <div slide-id="3" slide-color="#A5AAAE" class="slide">
      <div class="thumbnail"><img src="3.jpg"/></div>
      <h1 class="title">Slide 3</h1>
      <p class="description">Slide 3 Content</p>
    </div>
  </div>
  <div class="footer">
    <a id="prev" href="#" ripple="" ripple-color="#666666" class="btn">Prev</a>
    <a id="next" href="#" ripple="" ripple-color="#666666" class="btn">Next</a>
  </div>
</div>

2. The primary CSS styles for the card slider.

.card {
  background: #FFFFFF;
  max-width: 400px;
  margin: 100px auto;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  box-sizing: border-box;
  padding: 48px;
  text-align: center;
}

.slides {
  position: relative;
  overflow: hidden;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.slide.active {
  opacity: 1;
  visibility: visible;
}

.thumbnail { margin: 0 0 48px; }

.title {
  margin: 0 0 12px;
  color: #D18B49;
  font-size: 24px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.description { margin: 0 0 48px; }

.footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 -12px -12px;
}

3. Include the latest version of jQuery library at the bottom of the webpage.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 

4. Active the card slider.

var getslideHeight = $('.slide.active').height();

$('.slides').css({
  height: getslideHeight
});

function calcslideHeight() {
  getslideHeight = $('.slide.active').height();

  $('.slides').css({
    height: getslideHeight
  });
}

function animateContentColor() {
  var getslideColor = $('.slide.active').attr('slide-color');

  $('body').css({
    background: getslideColor
  });

  $('.title').css({
    color: getslideColor
  });

  $('.btn').css({
    color: getslideColor
  });
}

var slideItem = $('.slide'),
  slideCurrentItem = slideItem.filter('.active');

$('#next').on('click', function(e) {
  e.preventDefault();

  var nextItem = slideCurrentItem.next();

  slideCurrentItem.removeClass('active');

  if (nextItem.length) {

    slideCurrentItem = nextItem.addClass('active');
  } else {
    slideCurrentItem = slideItem.first().addClass('active');
  }

  calcslideHeight();
  animateContentColor();
});

$('#prev').on('click', function(e) {
  e.preventDefault();

  var prevItem = slideCurrentItem.prev();

  slideCurrentItem.removeClass('active');

  if (prevItem.length) {
    slideCurrentItem = prevItem.addClass('active');
  } else {
    slideCurrentItem = slideItem.last().addClass('active');
  }

  calcslideHeight();
  animateContentColor();
});

5. The JavaScript & CSS snippets to create the ripple click effect for navigation buttons.

$('[ripple]').on('click', function(e) {
  var rippleDiv = $('<div class="ripple" />'),
    rippleSize = 60,
    rippleOffset = $(this).offset(),
    rippleY = e.pageY - rippleOffset.top,
    rippleX = e.pageX - rippleOffset.left,
    ripple = $('.ripple');

  rippleDiv.css({
    top: rippleY - (rippleSize / 2),
    left: rippleX - (rippleSize / 2),
    background: $(this).attr("ripple-color")
  }).appendTo($(this));

  window.setTimeout(function() {
    rippleDiv.remove();
  }, 1900);
});

[ripple] {
 z-index: 1;
 position: relative;
 overflow: hidden;
}

[ripple] .ripple {
  position: absolute;
  background: #FFFFFF;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-animation: ripple 2s;
  animation: ripple 2s;
}

@-webkit-keyframes 
ripple {  0% {
 -webkit-transform: scale(0);
 transform: scale(0);
 opacity: 0.2;
}
 100% {
 -webkit-transform: scale(20);
 transform: scale(20);
 opacity: 0;
}
}

@keyframes 
ripple {  0% {
 -webkit-transform: scale(0);
 transform: scale(0);
 opacity: 0.2;
}
 100% {
 -webkit-transform: scale(20);
 transform: scale(20);
 opacity: 0;
}
}

---

This awesome jQuery plugin is developed by andytran. For more Advanced Usages, please check the demo page or visit the official website.