画像ギャラリーを見せる手法として使われるスライドショーですが、CSSのみを使ったものやjQueryなどを使ったものなどが色々とありますが、面白そうなものを集めてみました。 関連:イケてるローディング・アニメーション25選

一味違うスライダー 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 デモ / ダウンロード ボックスとマスクを使った面白い動きをします。

扉のような動きOne page scroll with depth effect

ページに表示された2枚の画像が扉のように開くスライダーです。

あわせて読みたい記事