Simple Expanding Content Slider with jQuery and CSS3

A simple, responsive jQuery & CSS3 content slider which allows you to slide through a set of content with shrink / expand animations powered by CSS3 transitions and transforms.

How to use it:

1. Create a navigation to slide through the slides.

 

<nav>
  <div class="nav-item" id="0"></div>
  <div class="nav-item" id="1"></div>
  <div class="nav-item" id="2"></div>
  <div class="nav-item" id="3"></div>
</nav>

2. Embed any content into the slides as follows.

<div class="wrapper">
  <div class="slide current one" id="0">
    <h1 class="slide-title">Slide One</h1>
  </div>
  <div class="slide two shrink" id="1">
    <h1 class="slide-title">Slide Two</h1>
  </div>
  <div class="slide three shrink" id="2">
    <h1 class="slide-title">Slide Three</h1>
  </div>
  <div class="slide four shrink" id="3">
    <h1 class="slide-title">Slide Fout</h1>
  </div>
</div>

3. The primary CSS styles for the content slider.

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.wrapper {
  height: 100%;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
}

.current {
  display: block
}

nav {
  position: absolute;
  width: 100%;
  height: 50px;
  background: #2C3E50;
  text-align: center;
  z-index: 99;
}

.nav-item {
  height: 10px;
  width: 10px;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background: #fff;
  display: inline-block;
  margin: 20px 10px;
}

.slide-title {
  margin: 0 auto;
  top: 50%;
  position: relative;
  display: block;
  color: #fff;
  font-size: 2em;
  font-weight: 500;
}

4. Create the shrink / expand animations using CSS3.

.increase-size {
  -webkit-transform: scale3d(1.5, 1.5, 1.5);
  -moz-transform: scale3d(1.5, 1.5, 1.5);
  -o-transform: scale3d(1.5, 1.5, 1.5);
  transform: scale3d(1.5, 1.5, 1.5);
  -webkit-transition: transform 0.5s ease;
  -moz-transition: transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
}

.decrease-size {
  -webkit-transform: scale3d(1, 1, 1);
  -moz-transform: scale3d(1, 1, 1);
  -o-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: transform 0.2s ease;
  -moz-transition: transform 0.2s ease;
  -o-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
}

@keyframes "shrink" {
  from {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(88deg);
    -moz-transform: rotateY(88deg);
    -o-transform: rotateY(88deg);
    -ms-transform: rotateY(88deg);
    transform: rotateY(88deg);
  }
}

@-webkit-keyframes "shrink" {
  from {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(88deg);
    -moz-transform: rotateY(88deg);
    -o-transform: rotateY(88deg);
    -ms-transform: rotateY(88deg);
    transform: rotateY(88deg);
  }
}

.shrink {
  -webkit-animation: shrink 1s 1 ease forwards;
  -moz-animation: shrink 1s 1 ease forwards;
  -o-animation: shrink 1s 1 ease forwards;
  animation: shrink 1s 1 ease forwards;
  overflow: visible !important;
}

@keyframes "unshrink" {
  from {
    -webkit-transform: rotateY(88deg);
    -moz-transform: rotateY(88deg);
    -o-transform: rotateX(88deg);
    -ms-transform: rotateX(88deg);
    transform: rotateX(88deg);
  }
  to {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}

@-webkit-keyframes "unshrink" {
  from {
    -webkit-transform: rotateY(-88deg);
    transform: rotateY(-88deg);
  }
  to {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}

.unshrink {
  -webkit-animation: unshrink 2.5s 1 ease forwards;
  -moz-animation: unshrink 2.5s 1 ease forwards;
  -o-animation: unshrink 2.5s 1 ease forwards;
  animation: unshrink 2.5s 1 ease forwards;
  overflow: visible !important;
}

5. Load the latest version of jQuery JavaScript library from a CDN.

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

6. The core JavaScript to enable the content slider.

$(document).ready(function() {
  $(".nav-item").mouseover(function() {
    $(this).addClass("increase-size");
    $(this).removeClass("decrease-size");
  });

  $(".nav-item").mouseout(function() {
    $(this).removeClass("increase-size");
    $(this).addClass("decrease-size");
  });
  $(".nav-item").click(function() {
    var currentNav = $(this);
    var navLinkId = $(this).attr("id");
    var slides = $(".slide");

    $.each(slides, function(i, slide) {
      if ($(slide).attr("id") == navLinkId) {
        var slideBg = $(slide).css("background-color");
        console.log(slideBg)
        $(currentNav).css("background-color", slideBg);
        $(this).removeClass("shrink").addClass("current unshrink");
      } else {
        $(this).removeClass("current");
      }
    });
  })
});

---

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