この記事では、僕がこれまで案件で遭遇してきたスライダーを紹介します。

すべてslickを使用しています。

slickの基本的な使い方については上記サイトを参考にしてみてください。

これから紹介する各サンプルのソースコードはGitHubで公開していますので、気になる方はクローンしてみてください。

GitHubへ移動する

余談

この記事内にソースコードを貼らない理由は、gulpを使用して実装しているためです。

実装に関わるscssファイルなどをここにすべて記載すると、記事がごちゃごちゃしてしまうのでGitHubへ記載することにしました。

GitHubでのgulpの構成は、以下の記事で紹介しているものと同じです。

これだけは入れておきたいGulpタスク3選

以下では、そのgulpの構成をさらに実務ベースに引き上げたものになっています。

よかったら覗いてみてください。

有料note公開中!
詳細は下記画像をクリック👇

駆け出しからGulpを使って即戦力になろう!

sample01(難易度★★)

コーポレートサイトのメインビジュアル(MV)にありそうなスライダーです。

▼PC表示時

slickを使ったスライダー実装サンプル集

スライダーデモ01を見る

GitHubへ移動する

sample02(難易度★★)

現在表示されている(現在アクティブになっている)スライドだけを明るくして、それ以外のスライドは暗くするスライダーです。
※この機能はPC表示時のみ

▼PC表示時

slickを使ったスライダー実装サンプル集

スライダーデモ02をを見る

GitHubへ移動する

sample03(難易度★★★)

ECサイトにありそうなスライダーです。

▼PC表示時

slickを使ったスライダー実装サンプル集

スライダーデモ03を見る

GitHubへ移動する

sample04(難易度★★★★★)

スライダーの動きに連動して、左のトライアングルが回転します。

また、画像の上をマウスでホイールすると(スマホ表示時だと上下にスワイプ)スライドが前後します。

さらに、左のトライアングルの各要素をクリックするとそれに合ったスライドに切り替わります。

▼PC表示時

スライダーデモ04を見る

GitHubへ移動する

Sample05(難易度★★)

👇特徴

  • 各スライドの画像がズームアウトしながらフェードで切り替わる
  • 各スライドには別々のテキストが画像の上にabsoluteで配置されている
  • 各スライドの画像をPCとSPで出しわけできる

スライダーデモ05を見る

GitHubへ移動する