CSSだけでつくれるsliderプラグインまとめ

Pocket

コーポレートサイトやランディングページ、ECサイトのトップページでもよく使われるSlider。Bootstrapのコンポーネントにもなっていて簡単に使えるものが多くなっているので助かります。

スライダーはほとんどの場合jQueryやjavascriptでつくられています。しかしながらASPの都合や案件によってはjavascriptが使えなかったり、使いたくなかったりすることもありますよね。

そんなときに便利なのが以下で紹介するCSSだけでスライダーを作れる方法。javascriptは使えないけどcssだけでスライダーを使いたい場合に大変重宝するので是非ストックしておきたいものです。

CSSだけでつくれるSliderプラグインまとめ

Pure CSS Slider
cssだけでつくれるsliderまとめ-01
Basic CSS3 Slider
cssだけでつくれるsliderまとめ-02
Making a Pure CSS Featured Image Slider
cssだけでつくれるsliderまとめ-03
A Simple Yet Effective CSS3 Image Slider
cssだけでつくれるsliderまとめ-04
Experimental CSS3 Only Image Slider with 3D Transforms
cssだけでつくれるsliderまとめ-05
CSS Slider (Pure CSS)
cssだけでつくれるsliderまとめ-06
Slider in only css
cssだけでつくれるsliderまとめ-07
Solitary CSS3 Slider (Rotation Transition)
cssだけでつくれるsliderまとめ-08
Pure css slider
cssだけでつくれるsliderまとめ-09

さいごに

いかがだったでしょうか?ここまでスライダープラグインを紹介してきましたが、個別のプラグインを実装するのってけっこうメンドクサイんですよね。

とんなときは、最近人気のCSSフレームワークであるBootstrapを使うのも方法の1つ。BootstrapならHTMLコードのテンプレートをコピペするだけで簡単にスライダーを実装できます。
初心者のための簡単なBootstrap3のはじめ方