今回やりたいこと

メインビジュアルなどでよくある、フェードインアウトで切り替わるスライダーを実装します。カルーセルの場合だとslickを使うことが多いと思いますが今回はフェードインアウトなのでもっと簡単に記述できるjQueryを紹介します。（※もちろんslickでもフェードインアウトスライダーの実装は可能です。）

HTML

まずはHTMLです。レスポンシブ（PCとスマホで異なる画像を使用することを想定してます。）


<ul class="index-fade__items">
<!-- "u-hidden-sp"はスマホで非表示 / "u-hidden-pc"はPCで非表示 -->
	<li>
		<img src="top01.jpg" alt="" class="u-hidden-sp">
		<img src="top01_sp.jpg" alt="" class="u-hidden-pc">
	</li>
	<li>
		<img src="top02.jpg" alt="" class="u-hidden-sp">
		<img src="top02_sp.jpg" alt="" class="u-hidden-pc">
	</li>
	<li>
		<img src="top03.jpg" alt="" class="u-hidden-sp">
		<img src="top03_sp.jpg" class="u-hidden-pc">
	</li>
</ul>

“u-hidden-pc””u-hidden-sp”クラスを使用して表示する画像がブラウザサイズで切り替わるようにしています。

また、それらを1つの要素（ここではli要素）で括ることで、スライダーの1コンテンツとしてみなすことができます。

CSS（※scss記法）

次にCSSの記述です。


.index-fade {
  &__items {
    position: relative;
    width: 100%;
    height: auto;
    height: 70vh;
    overflow: hidden;
    min-height: 320px;
    @include l-pc {
      height: 87vh;
    }
    li {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

そのままだと画像が上から順番に並んでしまうので、ul要素を基準として各li要素（スライダーのコンテンツとなる要素）をposition: absolute;によって中央配置になるように重ねます。

object-fitはIEで機能しないので、前の記事で紹介したjsを読み込ませておきましょう。

jQuery

次にjQueryの記述です。色々な記事を探した結果、この記述が一番短く済むような印象でした。


$(function() {
  $(".index-fade__items")
    .find("li")
    .hide();
  $(".index-fade__items")
    .find("li:first")
    .stop()
    .fadeIn(1000);

  setInterval(function() {
    $(".index-fade__items")
      .find("li:first-child")
      .fadeOut(1000)
      .next("li")
      .fadeIn(1000)
      .end()
      .appendTo(".index-fade__items");
  }, 3000);
});

秒数などは各々カスタマイズしてください。