Live Demo - 3D Slider Example Using Cascade Jquery

See Free Live Demo example of In this 3D slider demo we are display 3 image one is main selected image. second is next image which is display after main image. third image is previous image which is before main image. this alider also call carousel slider. We allows to free snippets of jquery 3d carousel slider free download...

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="//nicesnippets.com/demo/cascade-slider.js"></script>
</head>
<body>
  <section>
    <h1>3D Slider</h1>
    <div class="cascade-slider_container" id="cascade-slider">
      <div class="cascade-slider_slides">
        <div class="cascade-slider_item">
          <img src="https://placeimg.com/329/280/animals" alt="">
        </div>
        <div class="cascade-slider_item">
          <img src="https://placeimg.com/329/280/arch" alt="">
        </div>
        <div class="cascade-slider_item">
          <img src="https://placeimg.com/329/280/nature" alt="">
        </div>
        <div class="cascade-slider_item">
          <img src="https://placeimg.com/329/280/people" alt="">
        </div>
        <div class="cascade-slider_item">
          <img src="https://placeimg.com/329/280/tech" alt="">
        </div>
        <div class="cascade-slider_item">
          <img src="https://placeimg.com/329/280/sepia" alt="">
        </div>
      </div>

</body>
</html>

body{ 
  background-color:#8ED2C9;
  color:#fff;
 }
h1 {
  margin:70px auto 100px auto; 
  text-align:center;
}
img { 
  background-color:#fff; 
  padding:5px;
}
.cascade-slider_container {
  position: relative;
  width:80%;
  height:225px;
  margin: 0 auto;
}
.cascade-slider_item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(0.3);
  transition: all 1s ease;
  opacity: 0;
  z-index: -1;
}
.cascade-slider_item.next {
  left: 50%;
  transform: translateY(-50%) translateX(-150%) scale(0.6);
  opacity: 1;
  z-index: 1;
}
.cascade-slider_item.prev {
  left: 50%;
  transform: translateY(-50%) translateX(50%) scale(0.6);
  opacity: 1;
  z-index: 1;
}
.cascade-slider_item.now {
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(1);
  opacity: 1;
  z-index: 5;
}
.cascade-slider_nav > .cascade-slider_dot.cur{
  border:1px solid red !important;
}

.cascade-slider_arrow {
  display: inline-block;
  position: absolute;
  top: 50%;
  cursor: pointer;
  z-index: 5;
}
.cascade-slider_arrow-left { left: 0; }
.cascade-slider_arrow-right { right: 0; }
.cascade-slider_nav {
  position: absolute;
  bottom:-170px;
  width: 100%;
  text-align: center;
  z-index: 5;
}
.cascade-slider_arrow i{
  font-size:35px; 
}
.cascade-slider_dot{
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 1em;
  background: #ddd;
  list-style: none;
  cursor: pointer;
  border-radius: 50%;
}
.cascade-slider_dot:hover { background: #555; }