CodePen

HTML

            
              <div class="slider">
  <span id="prev">PREV</span>
  <span class="slider-image" id="img1">&nbsp;</span>
  <span class="slider-image" id="img2">&nbsp;</span>
  <span class="slider-image" id="img3">&nbsp;</span>
  <span class="slider-image" id="img4">&nbsp;</span>
  <span class="slider-image" id="img5">&nbsp;</span>
  <span class="slider-image" id="img6">&nbsp;</span>
  <span class="slider-image" id="img7">&nbsp;</span>
  <span class="slider-image" id="img8">&nbsp;</span>
  <span class="slider-image" id="img9">&nbsp;</span>
  <span class="slider-image" id="img10">&nbsp;</span>
  <span class="slider-image" id="img11">&nbsp;</span>
  <span class="slider-image" id="img12">&nbsp;</span>
  <span id="next">NEXT</span>
</div>
            
          
!
via HTML Inspector

CSS

            
              .slider {
  position: relative;
  margin: 15px auto;
  width: 1000px;
  height: 350px;
  outline: 1px solid #000000;
  font-size: 0;
  overflow: hidden;
}

#prev, #next {
  position: relative;
  font-size: 16px;
  z-index: 100;
  top: 150px;
  outline: 1px solid #000000;
}

#prev {
  float: left;
  left: 0;
}

#next {
  float: right;
  right: 0;
  
}

.slider-image {
  display: inline-block;
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 120px;
  margin: 55px 0;
  transition: all 1s ease-in-out;
}

#img1, #img5, #img9 {
  background-color: pink;
  left: 75px;
}

#img2, #img6, #img10 {
  background-color: blue;
  left: 282px;
}

#img3, #img7, #img11 {
  background-color: orange;
  left: 488px;
}

#img4, #img8, #img12 {
  background-color: red;
  left: 685px;
}

#img1 {
  background-color: pink;
}

#img2 {
  background-color: blue;
}

#img3 {
  background-color: orange;
}

#img4 {
  background-color: red;
}

#img5 {
  background-color: green;
  top: -300px;
}

#img6 {
  background-color: yellow;
  top: -300px;
}

#img7 {
  background-color: cyan;
  top: -300px;
}

#img8 {
  background-color: lightblue;
  top: -300px;
}

#img9 {
  background-color: gray;
  top: -600px;
}

#img10 {
  background-color: gold;
  top: -600px;
}

#img11 {
  background-color: black;
  top: -600px;
}

#img12 {
  background-color: tan;
  top: -600px;
}

#img1:hover, #img2:hover, #img3:hover, #img4:hover, #img5:hover, #img6:hover, #img7:hover, #img8:hover, #img9:hover, #img10:hover, #img11:hover, #img12:hover {
  z-index: 100;
  transform: scale(1.25);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function() {
  $('#prev').click(function() {
    if($('#img1').css("top") == "0px") {
      $('#img1, #img2, #img3, #img4').css({
        "top": "-600px"
      });
      $('#img5, #img6, #img7, #img8').css({
        "top": "-300px"
      });
      $('#img9, #img10, #img11, #img12').css({
        "top": "0px"
      });
    } else if($('#img1').css("top") == "-300px") {
      $('#img1, #img2, #img3, #img4').css({
        "top": "0px"
      });
      $('#img5, #img6, #img7, #img8').css({
        "top": "-600px"
      });
      $('#img9, #img10, #img11, #img12').css({
        "top": "-300px"
      });
    } else if($('#img1').css("top") == "-600px") {
      $('#img1, #img2, #img3, #img4').css({
        "top": "-300px"
      });
      $('#img5, #img6, #img7, #img8').css({
        "top": "-0px"
      });
      $('#img9, #img10, #img11, #img12').css({
        "top": "-600px"
      });
    }
  });
  $('#next').click(function() {
    if($('#img1').css("top") == "0px") {
      $('#img1, #img2, #img3, #img4').css({
        "top": "-300px"
      });
      $('#img5, #img6, #img7, #img8').css({
        "top": "-600px"
      });
      $('#img9, #img10, #img11, #img12').css({
        "top": "0px"
      });
    } else if($('#img1').css("top") == "-300px") {
      $('#img1, #img2, #img3, #img4').css({
        "top": "-600px"
      });
      $('#img5, #img6, #img7, #img8').css({
        "top": "0px"
      });
      $('#img9, #img10, #img11, #img12').css({
        "top": "-300px"
      });
    } else if($('#img1').css("top") == "-600px") {
      $('#img1, #img2, #img3, #img4').css({
        "top": "0px"
      });
      $('#img5, #img6, #img7, #img8').css({
        "top": "-300px"
      });
      $('#img9, #img10, #img11, #img12').css({
        "top": "-600px"
      });
    }
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................