Image Slider With Zoom & Shrink Transitions

A small, fancy, fullscreen jQuery/CSS3 slider script that enables next/prev buttons to switch between images with zoom & shrink animations.

Works with modern browsers that support the CSS clip-path property. And fallbacks to a slide animation for legacy browsers.

How to use it:

1. Insert images together with next/prev buttons to the slider.

<div id="main">
  <div id="silder">
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
    ...
  </div>
</div>

<div id="prvbtn">&#8592</div>
<div id="nxtbtn">&#8594</div>

2. Include the necessary jQuery library on the page.

<script src="/path/to/cdn/jquery.min.js"></script>

3. The main JavaScript for the slider.

$(document).ready(function () {
  $count = 1;
  $("#nxtbtn").click(function () {
      if ($count == 1) {
          shrink();
          $('#silder').delay(1000).animate({
              left: "-100%"
          }, 1000);
          zoom();

          $count = 2;
      } else if ($count == 2) {
          shrink();
          $('#silder').delay(1000).animate({
              left: "-200%"
          }, 1000);
          zoom();
          $count = 3;
      }
  });

  $("#prvbtn").click(function () {
      if ($count == 3) {
          shrink();
          $('#silder').delay(1000).animate({
              left: "-100%"
          }, 1000)
          zoom();
          $count = 2;
      } else if ($count == 2) {
          shrink();
          $('#silder').delay(1000).animate({
              left: "0%"
          }, 1000)
          zoom();
          $count = 1;
      }
  });

  function shrink() {
      $('#main').css({
          '-webkit-clip-path': "polygon(10% 20%,0% 100%,100% 100%,100% 0%,10% 20%)",
          'clip-path': "polygon(10% 20%,0% 100%,100% 100%,100% 0%,10% 20%)"
      });

      setTimeout(function () {
          $('#main').css({
              '-webkit-clip-path': "polygon(10% 20%,0% 100%,100% 100%,90% 20%,10% 20%)",
              'clip-path': "polygon(10% 20%,0% 100%,100% 100%,90% 20%,10% 20%)"
          });
      }, 150);

      setTimeout(function () {
          $('#main').css({
              '-webkit-clip-path': "polygon(10% 20%,0% 100%,90% 80%,90% 20%,10% 20%)",
              'clip-path': "polygon(10% 20%,0% 100%,100% 100%,90% 20%,10% 20%)"
          });
      }, 300);

      setTimeout(function () {
          $('#main').css({
              '-webkit-clip-path': "polygon(10% 20%,10% 80%,90% 80%,90% 20%,10% 20%)",
              'clip-path': "polygon(10% 20%,10% 80%,90% 80%,90% 20%,10% 20%)"
          });
      }, 450);
  }

  function zoom() {
      setTimeout(function () {
          $('#main').css({
              '-webkit-clip-path': "polygon(10% 20%,0% 100%,90% 80%,90% 20%,10% 20%)",
              'clip-path': "polygon(10% 20%,0% 100%,90% 80%,90% 20%,10% 20%)"
          });
      }, 2000);
      setTimeout(function () {
          $('#main').css({
              '-webkit-clip-path': "polygon(10% 20%,0% 100%,100% 100%,90% 20%,10% 20%)",
              'clip-path': "polygon(10% 20%,0% 100%,100% 100%,90% 20%,10% 20%)"
          });
      }, 2150);

      setTimeout(function () {
          $('#main').css({
              '-webkit-clip-path': "polygon(10% 20%,0% 100%,100% 100%,100% 0%,10% 20%)",
              'clip-path': "polygon(10% 20%,0% 100%,100% 100%,100% 0%,10% 20%)"
          });
      }, 2300);

      setTimeout(function () {
          $('#main').css({
              '-webkit-clip-path': "polygon(0% 0%,0% 100%,100% 100%,100% 0%,0% 0%)",
              'clip-path': "polygon(0% 0%,0% 100%,100% 100%,100% 0%,0% 0%)"
          });
      }, 2450);


  }

});

4. The primary slider styles.

#main {
  height: 100vh;
  width: 100%;
  position: absolute;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%);
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%);
  overflow: hidden;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s; 
}

#silder {
  width: 300%; /* 3 slides */
  position: relative;
  left: 0; 
}

#silder img {
  width: 33.33%;
  float: left; 
}

5. Style & position the navigation buttons.

#nxtbtn,
#prvbtn {
  height: 35px;
  width: 35px;
  background-color: white;
  font-size: 25px;
  text-align: center;
  line-height: 35px;
  border-radius: 35px;
  position: fixed;
  top: 85%;
  left: 53%;
  cursor: pointer;
  font-family: monospace; 
}

#prvbtn {
  left: 47%; 
}

---

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