【CSS3】CSSのみで作るズームスライダー15選‼️【簡単】

個人的に結構定番化してきたCSSシリーズ。
私がJsが苦手だからというのもありますが、CSSで賄えるところはまかないたいといつも思ってます。笑

Jsだと私の理解不足で、プラグインとかを使用しても結構思い通りにできないことが多くていつも苦労します。
今回はスライダー。

スライダーだってCSSで実装が可能なんですよ。
一時期は流行りが終わったかと思われましたが、最近おしゃれなスライダーも増えてきましたからね、
CodePenから良いものを探してまとめてみました。

ぜひ参考にしてみてください。

1. css slider

See the Pen css slider by vavik (@vavik96) on CodePen.0

左から右へのスライダー。テキストも後から遅れてスライドしてくれます。
こういうのって私は今までslickやBxSliderを利用してたんですが、もはやCSSでできちゃうんですね。感慨深いです。

2. Pure CSS Slider

See the Pen Pure CSS Slider by Sean Burke (@seanburke) on CodePen.0

こちらも形としてはよく見かけるタイプのスライダー。ただ自動ではスライドしないので、メインビジュアルで使用するというよりは、コンテンツで使えそうですね。

3. pure css slider

See the Pen
pure css slider by Magdalena (@FiGu)
on CodePen.

ギャラリーのような見た目のスライダー。写真をたくさん見せたい時なんかに使えそうです。

4. CSS slider full

See the Pen CSS slider full by vavik (@vavik96) on CodePen.0

ザ・スライダーという感じの定番スライダーです。フルサイズなのでメインビジュアルなどの大きく見せたい場所で使用できそうです。
こちらは自動でスライドしてくれます。

5. css　slider

See the Pen css　slider by 茜 (@peonyqueen) on CodePen.0

スライダーの切り替わりがフェードになってるものです。最近はズーム＋フェードの切り替わり方をよく見かけますね。うまく組み合わせて使えそうです。

6. Only CSS: Slider

See the Pen Only CSS: Slider by Yusuke Nakaya (@YusukeNakaya) on CodePen.0

最近よく見かけるレイアウトのスライダー。普通に左右にスライドするタイプ以外のものも増えてきましたよね。うまく応用すれば使えそうです。

7. CSS slider with background parallax

See the Pen CSS slider with background parallax by c01nd01r (@c01nd01r) on CodePen.0

背景が可愛いですね。新しい感じのスライダー。文字だけが切り替わります。

8. CSS Sliding Background

See the Pen CSS Sliding Background by chiharu shoji (@kenyo_c) on CodePen.0

画像がスクロールしていくタイプのスライダー。絵を見せたいような場合に使えそうですね。

9. CSS Slider

See the Pen CSS Slider by Elena (@semenchenko) on CodePen.0

変わった形のスライダー。メインづかいというよりはコンテンツ内で使えるタイプですかね。

10. Pure CSS | Slider with Indicator Dots

See the Pen Pure CSS | Slider with Indicator Dots by Joanna Hughes (@jhughes1006) on CodePen.0

コンテンツのブロックが切り替わるタイプのスライド。これもメインづかいするタイプじゃないですね。

11. Pure CSS Slider

See the Pen Pure CSS Slider by Kory (@komcdo) on CodePen.0

切り替わり方が気持ちいいスライダーです。

12. CSS slider

See the Pen CSS slider by Gustavo Gauthier (@ggauthier) on CodePen.0

スライダーとはちょっと違うかもしれないですが、これもたまに見かける新しいタイプのスライダー。何かの商品の詳細を紹介するページなんかで見かけますね。

13. Only CSS auto-slider!!

See the Pen Only CSS auto-slider!! by abhishake (@7355018000_Abhishek) on CodePen.0

下に読み込みのバーが出るタイプのスライダー。

14. Untitled

See the Pen JGbjpZ by Matthias (@speedymh) on CodePen.0

文字が下からふわっとでてくるタイプのスライダー。おしゃれです。

15. css slider

See the Pen css slider by Trikyas (@trikyas) on CodePen.0

自動で切り替わるスライダー。テキスト部分にマスクがかかってます。

まとめ

いかがでしょうか？
CSSでのスライダーが実装ができる時代になりました。
JSよりもリスクが少ないですし、意外とバリエーションも豊富です。ぜひ一度見てみてはいかがでしょうか。