SONICMOOV Googleページ

コピペで使うCSS スライドショー 22選

コピペで使うCSS スライドショー 22選

  • このエントリーをはてなブックマークに追加

画像ギャラリーを見せる手法として使われるスライドショーですが、CSSのみを使ったものやjQueryなどを使ったものなどが色々とありますが、面白そうなものを集めてみました。

関連:イケてるローディング・アニメーション25選

目次

  1. 一味違うスライダー Canvas image slider
  2. エフェクトがクール WebGL Distortion Slider
  3. マスクを使ったスライダー Image Slider with Masking Effect
  4. サムネイル付き Gliding Gallery | Simple Image Slider Transitions
  5. スライド型ナビゲーション Sticky Slider Navigation (Responsive)
  6. オシャレスライダー CSS-only image slider using SVG patterns
  7. ドラッグできるFullscreen drag-slider with parallax
  8. 使いたくなる Fancy Slider
  9. プリズムでオシャレ感演出 Prism Effect Slider
  10. 文字エフェクトResponsive Parallax Drag-slider With Transparent Letters
  11. シンプルに使う Simple Image Slider
  12. CSSのみで動作 Pure CSS Slider
  13. フェードイン・フェードアウトする Flexbox Image Slider
  14. サムネイルで案内 previewSlider / Thumbnail Preview
  15. グミなGummy slider
  16. ド派手な3Dスライダー Slicebox – 3D Image Slider
  17. 波紋スライダー Image Overlay Slider
  18. jQueryを使ったbXSlider
  19. スマホのスワイプに対応 Owl Carousel 2
  20. モックアップでスライドショー MOCKUP SLIDESHOW
  21. キードードで動かせる Draggable Dual-View Slideshow
  22. ボックスとマスクな Four Boxes Slideshow

一味違うスライダー Canvas image slider

初見で「おっ!?」と思わせてくれることは間違いないでしょう。

エフェクトがクール WebGL Distortion Slider

これはかっこいいスライダーですね。

マスクを使ったスライダー Image Slider with Masking Effect

マスクを使ったCSSスライダーで、動きがシャープ&シンプルです。

サムネイル付き Gliding Gallery | Simple Image Slider Transitions

至り尽くせりなスライダーではないでしょうか。サムネイルがあるので視覚的にもユーザーの閲覧率を高めてくれそうです。

スライド型ナビゲーション Sticky Slider Navigation (Responsive)

スライド型のナビゲーションで、動きにオシャレ感があります。

オシャレスライダー CSS-only image slider using SVG patterns

モーションがオシャレで、ぜひとも使ってみたい一品です。

ドラッグできるFullscreen drag-slider with parallax

パララックスなスライダーで、画面サイズによってキャプション部分の表示が変化します。

使いたくなる Fancy Slider

自動再生、あるいはクリックでスライドします。

プリズムでオシャレ感演出 Prism Effect Slider

プリズムのエフェクトがオシャレ感を醸し出してます。

文字エフェクトResponsive Parallax Drag-slider With Transparent Letters

文字エフェクトがいい感じです。

シンプルに使う Simple Image Slider

よく見かけるシンプルなスライダーです。

CSSのみで動作 Pure CSS Slider

HTMLとCSSのみで書かれたスライドショーです。画像そのものに動きがあるので、ユーザーの目を引きやすいのではないでしょうか。(同じ画像が使われていますが、他の画像と入れ替えれば切り替わりがちゃんと分かります)

フェードイン・フェードアウトする Flexbox Image Slider

これもシンプルにフェードイン・フェードアウトで画像が切り替わります。

サムネイルで案内 previewSlider / Thumbnail Preview

マウスオーバーで次の画像のサムネイルを表示、クリックするとインジケーターでローディングの表示や一覧表示などナビゲーションとしての役割を考慮したものとなっています。ただ、画面サイズによっては一覧画面からの戻りが分かりづらいです。

グミなGummy slider

画像はないですが、グミのような動きをするスライダーです。見づらい場合は下記リンク先で見てください。
https://codepen.io/Lewitje/pen/yNKNmV

ド派手な3Dスライダー Slicebox – 3D Image Slider

ド派手ですが、使い所に迷うかもしれません。

波紋スライダー Image Overlay Slider

エフェクト感がありますが、画面の横幅を少しいじる必要がありそうです。

jQueryを使ったbXSlider

CSSスライドショー/bxSlider

bXSlider

結構有名なjQueryを使ったスライダーではないでしょうか。
シンプル&クロスフェーダーで画像が切り替わり、レスポンシブにも対応しています。
画像ギャラリーとキャプション自動再生と停止コントロールのサンプルもチェックしてみてください。

スマホのスワイプに対応 Owl Carousel 2

CSSスライドショー / Owl Carousel 2

Owl Carousel 2

スマホのスワイプでスライドします。

モックアップでスライドショー MOCKUP SLIDESHOW

Mocupでスライドショー

デモ / ダウンロード

スマホやノートPCのモックアップ画面の中でスライドします。

キードードで動かせる Draggable Dual-View Slideshow

ドラッグできるスライドショー・Draggable Dual-View Slidesho

デモ / ダウンロード

マウスでドラッグしたり、キーボードでも画面の移動ができるようになっています。

ボックスとマスクな Four Boxes Slideshow

CSSスライドショー・Four Boxes Slideshow

デモ / ダウンロード

ボックスとマスクを使った面白い動きをします。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

ビールが好き。 でも最近はワインと日本酒もいいなぁと思える今日この頃。

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation