[ Swiper DEMO ]

#05 応用カード型 04-b

  • 総スライド数が slidesPerView(1ページ当たりのスライド数)を超える時だけスライダーにする
  • このサンプルの場合
    総スライド数: 3つ
    slidesPerView: 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.

#15 応用メインビジュアル 05

  • スライドアニメーション + 独自アニメーション
  • スライド外に独自要素を置いて連動させる
  • 視差効果(パララックス)を付ける

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.