jQueryでレスポンシブのfadein/outスライダー

今回やりたいこと

メインビジュアルなどでよくある、フェードインアウトで切り替わるスライダーを実装します。カルーセルの場合だと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);
});

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

参考にさせていただいた記事

今回参考にさせていただいた記事はこちらです。ありがとうございました。

related article

2019/12/06 JavaScript

area要素で地図をホバーした時に色を付ける方法

2020/01/14 JavaScript

.index( )と.eq( )を使った効率的なモーダル表示

2019/11/15 JavaScript

Youtubeをポップアップで再生させる方法

2021/07/19 JavaScript

lazyload.jsとスピナーアイコンを組み合わせる