slickを使ったfade-in-outスライダー実装方法【jQuery】

2023年1月13日

jQueryスライダー系プラグインの「slick」を使ったフェードインしながら画像が切り替わるスライドを紹介します。

slickを使ったfade-in-outスライダー実装方法【jQuery】

HTML↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slickを使ったfade-in-outスライダー実装方法【jQuery】</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
</head>
<body>
    <div class="myHero">
        <h1>Fade-in-out Slider Using Slick</h1>
        <div class="fade_slide">
            <div class="slide one"></div>
            <div class="slide two"></div>
            <div class="slide three"></div>
        </div>
        <p>scroll ↓</p>
    </div>

    <section>
        <h2>section1</h2>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
    <script src="my.js"></script>
</body>
</html>

CSS↓

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.myHero{
    height: 100vh;
    width: 100%;
    position: relative;
}
h1{
    color: #ffffff;
    position: absolute;
    top: 30vh;
    left: 10vw;
    font-size: 3em;
    letter-spacing: 2px;
    z-index: 2;
}
.slide{
    border: 5px solid #ffffff;
    height: 100vh;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 70%);
}
.one{
    background-image: url(p1.jpg);
}
.two{
    background-image: url(p2.jpg);
}
.three{
    background-image: url(p3.jpg);
}
p{
    position: absolute;
    bottom: 70px;
    left: 100px;
    color: #333333;
    font-size: 2em;
}
section{
    height: 100vh;
    width: 100%;
    background: #ffffff;
    padding: 50px;
    position: relative;
}
h2{
    color: #333333;
    font-size: 4em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-transform: uppercase;
}

JS↓

$(function(){
    $('.fade_slide').slick({
        accessibility: false,
        fade: true,
        autoplay: true,
        infinite: true,
        dots: false,
        arrows: false,
        autoplaySpeed: 3000,
        speed: 3000,
    });
  });

slickの解説

今回使用したのが、スライダーを作成する時に便利なプラグイン「slick」です。こちらのページより、cssとjsを読み込ませて使用します。こちら↓のタグをHTMLに書き込みましょう。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

slickは様々なスライダーを作成できるのでとてもオススメです。公式サイトはこちらになります。

HTMLの解説

<div class="fade_slide">
      <div class="slide one"></div>
      <div class="slide two"></div>
      <div class="slide three"></div>
</div>

今回スライダーとなる部分は.fade_slideで囲まれた要素になります。このクラス名は好きなクラス名で構いません。

.fade_slideで囲まれた三つのdivにCSS（background:url();）で画像を設定しています。このdivが切り替わりながらスライドする仕組みです。

CSSの解説

.slide{
    border: 5px solid #ffffff;
    height: 100vh;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 70%);
}
.one{
    background-image: url(p1.jpg);
}
.two{
    background-image: url(p2.jpg);
}
.three{
    background-image: url(p3.jpg);
}

今回はメインビジュアルにフェードインアウトするスライドを使い、尚且つ背景として固定するようにしてみました。background-attachment:fixed;を使って画像を固定しています。また、clip-pathでボックスの見え方を変えてみました。

背景画像の固定とclip-path-makerの使い方は過去記事を参考にしてみてください。

【CSSだけで出来る】背景画像を固定したままスクロールする方法

【CSS clip-path maker】切り抜きや背景のアクセントに

JSの解説

$(function(){
    $('.fade_slide').slick({
        accessibility: false,
        fade: true,
        autoplay: true,
        infinite: true,
        dots: false,
        arrows: false,
        autoplaySpeed: 3000,
        speed: 3000,
    });
  });

それではスライドの設定を解説していきましょう。スライドとなる親要素のクラスを指定してslickを起動させます。スライドによってカスタマイズできるようになっているので、オプションと値を設定していきます。今回設定したのは8つです。詳しくはオプション一覧をご覧ください。

オプション一覧

$('.slider').slick({

  // アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか
  accessibility: true,

  // 自動再生。trueで自動再生される。
  autoplay: false,

  // 自動再生で切り替えをする時間
  autoplaySpeed: 3000,

  // 自動再生や左右の矢印でスライドするスピード
  speed: 400,

  // 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか
  pauseOnHover: true,

  // 自動再生時にドットにマウスオンで一時停止するかどうか
  pauseOnDotsHover: true,

  // 切り替えのアニメーション。ease,linear,ease-in,ease-out,ease-in-out
  cssEase: 'ease',

  // 画像下のドット（ページ送り）を表示
  dots: false,

  // ドットのclass名をつける
  dotsClass: 'dot-class',

  // ドラッグができるかどうか
  draggable: true,

  // 切り替え時のフェードイン設定。trueでon
  fade: false,

  // 左右の次へ、前へボタンを表示するかどうか
  arrows: true,

  // 無限スクロールにするかどうか。最後の画像の次は最初の画像が表示される。
  infinite: true,

  // 最初のスライダーの位置
  initialSlide: 0,

  // 画像の遅延表示。‘ondemand’or'progressive'
  lazyLoad: 'ondemand',

  // スライドのエリアにマウスオーバーしている間、自動再生を止めるかどうか。
  pauseOnHover: true

  // スライドのエリアに画像がいくつ表示されるかを指定
  slidesToShow: 4,

  // 一度にスライドする数
  slidesToScroll: 1,

  // タッチスワイプに対応するかどうか
  swipe: true,

  // 縦方向へのスライド
  vertical: false,

  // 表示中の画像を中央へ
  centerMode: true,

  // 中央のpadding
  centerPadding: '160px'
});