slideshow-zoom

HTML

<ul class="slideshow-zoom">
  <li><img src="http://lab.risewill.co.jp/images/web-design/action-sample-img1.jpg" alt="スライドショー画像1"></li>
  <li><img src="http://lab.risewill.co.jp/images/web-design/action-sample-img2.jpg" alt="スライドショー画像2"></li>
  <li><img src="http://lab.risewill.co.jp/images/web-design/action-sample-img3.jpg" alt="スライドショー画像3"></li>
  <li><img src="http://lab.risewill.co.jp/images/web-design/action-sample-img4.jpg" alt="スライドショー画像4"></li>
</ul>

SCSS

.slideshow-zoom{
    position: relative;
    overflow: hidden;
    width: 280px;
    height: 180px;
    padding: 0;
    li{
        list-style: none;
        width: 100%;
        height: 100%;
        animation: zooming 5s forwards;
        img{
          width: 100%;
        }
        @keyframes zooming {
      0% {
          z-index: 1;
          opacity: 0;
      }
    100% {
       transform: scale(1.2);
       opacity: 1;
       z-index: 10;
      }
    }
  }
}

JavaScript

$(function(){
  $(".slideshow-zoom li").css({"position":"relative"});
  $(".slideshow-zoom li").hide().css({"position":"absolute","top":0,"left":0});
  setInterval(function(){
    var $active = $(".slideshow-zoom li.zoom");
    var $next = $active.next("li").length?$active.next("li"):$(".slideshow-zoom li:first");
    $active.fadeOut(2000).removeClass("zoom");
    $next.fadeIn(2000).addClass("zoom");
  },2000);
});