簡単!Slickのクロスフェードの使い方

Blog

 

今回、紹介するのは、クロスフェードの実装方法です。

 

完成イメージ

 

 

 

 

今回は、こういったクロスフェードの実装方法を紹介します。

 

 

環境

  • HTML5
  • CSS3
  • Slick
  • jQuery

Slickのダウンロード・導入

  • SlickのサイトからSlickをダウンロードする。

 

 

 

 

 

  • ダウンロードしたSlickを該当のフォルダに追加。

 

 

 

 

 

 

  • 「slick.css」「slick-theme.css」「slick.min.js」のリンクをheaderに追加。
  • jQueryを追加。(Google jQueryを使用)

 

 

 

 

 

  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>

  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript" src="slick/slick.min.js"></script>

 

HTMLファイルの編集

 

 

 

 

  <div class="your-class">

    <div class = "top-image" style="background-image:url(./images/1.jpg);" >
      <div class = "bg-inner">
        <h2>HELLO WORLD!</h2>
        <p>hello world!</p>
      </div>
    </div>

    <div class = "top-image" style="background-image:url(./images/2.jpg);" >
      <div class="bg-inner">
        <h2>HELLO WORLD!</h2>
        <p>hello world!</p>

      </div>

    </div>
    <div class = "top-image" style="background-image:url(./images/3.jpg);" >
      <div class="bg-inner">
        <h2>HELLO WORLD!</h2>
        <p>hello world!</p>

      </div>
    </div>


  </div>

 

 

CSSファイルの編集

 

 

 

 

/* ba-inner */

.bg-inner {
  background: rgba(0, 0, 0, 0.5);
}


/* image */
.top-image {
  background-size: cover;
}

.top-image h2 {
  font-size: 50px;
  padding-top: 250px;
  text-align: center;
  color: #FFF;

}

.top-image p {
  padding-bottom: 200px;
  color: #FFF;
  text-align: center;


}

 

slickのコードを記入

 

  • </body>タグの前にslickのコードを記入。

 

 

 

 

  <script type="text/javascript">

  $('.your-class').slick({

    infinite: true,
    speed: 1700,
    autoplaySpeed: 4000,
    fade: true,
    cssEase: 'linear',
    autoplay: true

  });
  </script>

 

 

 

実行結果

 

 

 

 

 

以上で「手軽!簡単!Slickのクロスフェードの実装方法」の説明を終わります。

 

🤗

 

 

 

コメント