Simple Responsive Expanding Content Slider with jQuery

Simple responsive slides jQuery & CSS3 content slider that allows you to scroll through a range of content with shrink/expand animations supported by CSS3 transitions and transitions.

responsive slider codepen, jquery responsive slider, responsive slider jquery free download with demo, responsive slider in html, jquery image slider code

How to make use of it:

1. Create navigation to scroll 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. Include any content in 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. Basic 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 shrink/expand animation 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. Download the latest version of the jQuery JavaScript library from the CDN.

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

6. The core of 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");
      }
    });
  })
});

simple expanding content slider, Simple responsive slides Plugin/Codepen