[ Splide DEMO]

#05 応用カード型 04-b

  • 総スライド数が perPage(1ページ当たりのスライド数)を超える時だけ(総スライド数 > perPageのときだけ)スライダーにする
  • このサンプルの場合
    総スライド数: 3つ
    perPage: PC-4つ / Tablet-2つ / SP-1つ

#07 基本ギャラリー 01

  • サムネイル(スライダー)を付けて連動させる
  • スライダーの現在地表示
  • スライドが切り替わったらサムネイル画像を明るくする
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.
Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint obcaecat cupiditat non proident.
Sunt in culpa qui officia.
Deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#08 応用ギャラリー 02

  • サムネイル(非スライダー)を付けて連動させる
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.
Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint obcaecat cupiditat non proident.
Sunt in culpa qui officia.
Deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#09 基礎ギャラリー 03

  • ゆっくり動き続ける無限ループスライダー
  • 片方の進行方向を逆にする
  • ホバーしたら情報表示

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam.

Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint obcaecat cupiditat non proident.

Sunt in culpa qui officia.

Deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam.

Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint obcaecat cupiditat non proident.

Sunt in culpa qui officia.

Deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#10 応用フロー

  • スライダーを入れ子にする
  • ページネーションの出力内容をカスタマイズする

    Lorem ipsum

    Dolor sit amet, consectetur adipiscing elit.

    Tempor incidunt ut labore et dolore magna aliqua.

    Ad minim veniam.

    Sed eiusmod

    Dolor sit amet, consectetur adipiscing elit.

    Ut enim

    Dolor sit amet, consectetur adipiscing elit.

    Tempor incidunt ut labore et dolore magna aliqua.

    Ad minim veniam.

    #11 基本メインビジュアル 01

    • フェードアニメーション + 独自アニメーション

    Lorem ipsum dolor sit amet

    Sed eiusmod tempor incidunt

    Ut enim ad minim veniam

    Quis nostrum exercitationem

    Quis aute iure reprehenderit

    #12 応用メインビジュアル 02

    • フェードアニメーション + 独自アニメーション
    • アクティブになったとき・アクティブが外れたときでアニメーションを変える

    Lorem ipsum

    Dolor sit amet,
    consectetur adipiscing elit.

    Sed eiusmod

    Tempor incidunt ut labore
    et dolore magna aliqua.

    Ut enim

    Ad minim veniam.

    Quis nostrum
    exercitationem

    Ullam corporis suscipit laboriosam,
    nisi ut aliquid ex ea commodi consequatur.

    Quis aute iure

    Reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur.

    #13 応用メインビジュアル 03

    • 縦方向のスライダー

    #14 応用メインビジュアル 04

    • フェードアニメーション + 独自アニメーション
    • スライドごとに表示時間(delay)を変える
    • 進捗状況と連動したアニメーション(プログレスバー)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

    Ut enim ad minim veniam.

    Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

    Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.