スライドショー 20選

フェード・カルーセル・3D・パララックスまで、コピーしてそのまま使えるスライドショー実装。自動再生は画面内にある間だけ動く省エネ設計です。

01ふんわりフェード
02ドットで現在地
03クリックでジャンプ
04自動でループ
01. フェード+ドットベーシック / ふんわり切替の定番
01横にスライド
02矢印で前後移動
03ドットでも移動
04端まで来たらループ
02. 横スライド+矢印+ドットベーシック / フル装備のスタンダード
01次の切替まで残り時間が見える
02上の白いバーが進捗
03矢印操作でリセット
1 / 3
03. 自動再生+進捗バーベーシック / 残り時間を可視化
01メインビジュアル
02サムネで選択
03現在地は枠付き
04自動でも巡回
04. サムネイルナビ付きベーシック / ギャラリー向き
01 — 04
余白で魅せる
エディトリアルなレイアウト
LOOK 01
05. エディトリアル型ベーシック / 番号カウンタ+大矢印
01縦にスライド
02上下の矢印で操作
03左は縦型ドット
04ループで一周
06. 縦スライドベーシック / 上下矢印+縦ドット
01CSSスクロールスナップ
02スワイプでピタッと吸着
03JSは矢印の2行だけ
04scroll-behavior: smooth
SWIPE / SCROLL
07. スクロールスナップベーシック / ほぼCSSだけで実装
01中央だけ拡大
02両脇が見切れる
03脇をクリックで移動
04センターフォーカス
05自動でも巡回
08. センターフォーカスカルーセル / 中央拡大+チラ見せ
01カバーフロー
02両脇が3D回転
03脇クリックで前へ
04奥行きのある棚
05ジュエルカラー
09. カバーフロー風カルーセル / 両脇が3D回転
01ドラッグで送れる
02次のカードが右に覗く
03スワイプ対応
04端では止まる
DRAG ME
10. カード送り+ドラッグカルーセル / 次カードのチラ見せ
01ながれる
02とまらない
03ホバーで一時停止
04CSSだけで実装
05ロゴ一覧にも
06ギャラリーにも
01ながれる
02とまらない
03ホバーで一時停止
04CSSだけで実装
05ロゴ一覧にも
06ギャラリーにも
HOVER TO PAUSE — 後半6枚は複製(継ぎ目対策)
11. 無限ループマーキーカルーセル / JSゼロ・ホバーで停止
01スワイプで飛ばす
02クリックでも送れる
03飛んだら山の下へ
04無限にめくれる
SWIPE or CLICK
12. スタックデッキカルーセル / 上のカードが飛んでいく
01キューブが回る
024面ぐるぐる
03CSS 3D transform
04矢印で逆回転も
13. 3Dキューブ回転カルーセル / 立方体がゴロンと回る
01ゆっくりズーム&パン
02偶数枚は逆方向へ
03写真が生きて見える
04ヒーロー画像の定番
14. ケンバーンズ演出リッチ / ズーム+パンしながらフェード
SUMMER SALE
夏の大感謝祭、開幕。
NEW ARRIVAL
新作、一文字ずつ登場。
LIMITED
切替と同期して踊る。
15. テキスト同期演出リッチ / 見出しが1文字ずつ現れる
01短冊が順にめくれる
16. 分割ワイプ演出リッチ / 縦短冊が順にめくれて切替
背景はゆっくりPARALLAX 01
文字は先に進むPARALLAX 02
速度差で奥行きが出るPARALLAX 03
17. パララックス演出リッチ / 背景と前景の速度差で奥行き
01クリック点から円が広がる
02
どこかクリックしてみて
18. 円形クリップ演出リッチ / クリック点から円形に切替
導入して3ヶ月で問い合わせが2倍に。もっと早く使えばよかったと本気で思っています。
佐藤 美咲 さんアパレルEC / 30代
サポートの返信が早くて安心。専門知識ゼロの私でも、初日から迷わず使えました。
田中 健一 さん飲食店経営 / 40代
チーム全員の作業時間が週5時間減りました。浮いた時間を企画に回せるのが嬉しい。
山本 玲奈 さん制作会社ディレクター / 20代
19. 引用スライダー演出リッチ / お客様の声がスライド
CLOUD SERVICE
チームの仕事を、
ひとつの場所に。
CAMPAIGN
いまなら初月0円、
乗り換えもかんたん。
SUPPORT
導入後も、
365日そばにいます。
20. フルワイドヒーロー風演出リッチ / キャプション+CTAのファーストビュー