slideshow-slide

HTML

<ul class="slideshow-slide">
  <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-slide{
    position: relative;
    width: 280px;
    height: 200px;
    overflow: hidden;
    padding: 0;
    li{
        list-style: none;
        width: 100%;
        height: 100%;
        transition: 1s;
        top: 0;
        left: 0;
        &.slide{
          top: 0;
          left: 100%;
          z-index: 10;
        }
        &:first-of-type{
          display: block!important;
        }
        img{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
        }
    }
}

JavaScript

$(function(){
  $(".slideshow-slide li").css({"position":"relative"});
  $(".slideshow-slide li").hide().css({"position":"absolute"});
  $(".slideshow-slide li:first").addClass("slide");
  $(".slideshow-slide li:nth-child(2)").css({"display":"block"});
  setInterval(function(){
    var $active = $(".slideshow-slide li.slide");
    var $next = $active.next("li").length?$active.next("li"):$(".slideshow-slide li:first");
    var $nextnext = $next.next("li");
    $active.fadeOut(0).removeClass("slide");
    $next.show().addClass("slide");
    $nextnext.css({"display":"block"});
  },3000);
});