Fancy CSS3 Animated Image Slider With jQuery And CSS3

A fancy jQuery / CSS3 based fullscreen image slider that makes use of CSS transform and z-index properties to create a fancy 3D transition effect between images.

How to use it:

1. The html structure for the image slider.

<div class="full-slider">
  <div class="bg-clr2"></div>
  <div class="slides">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      ...
  </div>
  <div class="bg-clr"></div>
</div>

2. The primary CSS / CSS3 styles for the image slider.

.slides {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.slides img {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  z-index: -1;
  bottom: 120vh;
  box-shadow: 0px 20px 100px rgba(0,0,0,.1);
}

.slides img.top {
  position: absolute;
  z-index: -2;
  bottom: 0;
}

.bg-clr {
  overflow: hidden;
  z-index: 0;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  background-color: darkslategrey;
  opacity: .5;
}

.bg-clr2 {
  overflow: hidden;
  z-index: -4;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  background-color: gray;
  opacity: 1;
}

3. Don't forget to load the latest version of jQuery library in the html page.

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

4. The core JavaScript to active the image slider.

$(function(){
  $('.slides img:first').addClass('top');

  var change = function(){
      var cur = $('.slides img.top');
      var next= cur.next();
      
      if(!next.length){
          next = $('.slides img:first');
          next.addClass(top);
          cur.animate({width: "75%",bottom: "10vh"},1000,function(){
              cur.removeClass('top');
              next.addClass('top');
          });
          next.animate({bottom: "0"},1000,function(){
              cur.css({width: "100%",bottom: "120vh"});
          });
      }
      else{
          cur.animate({width: "75%",bottom: "10vh"},1000,function(){
              cur.removeClass('top');
              next.addClass('top');
          });
          next.animate({bottom: "0"},1000,function(){
              cur.css({width: "100%",bottom: "120vh"});
          });
      }
  }
  setInterval(change, 5000);
});

---

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