画像のカルーセル表示、今ではいろいろなサイトで見るようになりました。
アニメーション付きのカッコいいカルーセルスライダーだとjQueryやJavaScriptを使うものが主流ですが、CSSでもカッコいいアニメーション付きで作れます！
そこで今回はCSSのみで簡単に使えるアニメーション付きカルーセルスライダーをご紹介します。
ぜひサイトへの導入を考えられている方は参考にしてみてください。
目次
自動的にスライドするカルーセルスライダー
See the Pen
pure css carousel by TianyiLi (@tianyili)
on CodePen.
サムネイル型カルーセル
See the Pen
Pure CSS Carousel with Thumbnails by Ronny Siikaluoma (@siiron)
on CodePen.
カード型カルーセル
See the Pen
CSS-Tricks Card Carousel by William Goldsworthy (@william-goldsworthy)
on CodePen.
無限自動スライドカルーセル
See the Pen
[CSS] Infinite autoplay carousel by Jack Oliver (@studiojvla)
on CodePen.
4種のスタンダードなカルーセル(応用がききそう)
See the Pen
c(ss)arousel – pure CSS carousels 🎪🐎🎪🐎🎪🐎 by Jhey (@jh3y)
on CodePen.
全画面カルーセル(キーボードでコントロール可)
See the Pen
CSS Carousel with keyboard controls by David Lewis (@dp_lewis)
on CodePen.
縦型自動スライドカルーセル
See the Pen
CSS vertical carousel animation by Aija (@aija)
on CodePen.
アニメーションがオシャレなカルーセル
See the Pen
Pure CSS carousel by Olivier PASCAL (@pascaloliv)
on CodePen.
