TOP  >  WebDesign  >  CSSだけで使えるスライダー10選「10 Free Open Source Carousel Sliders Built With Pure CSS」
2017年08月11日

CSSだけで使えるスライダー10選「10 Free Open Source Carousel Sliders Built With Pure CSS」

情報を詰め込んだWEBサイト、どれもこれも見せたいのですが、そのためには情報を有効的に見せる事が重要になってきます。今回紹介するのは情報を魅力的に見せることができる、CSSだけで表現されたスライダーをまとめたエントリー「10 Free Open Source Carousel Sliders Built With Pure CSS」です。

OSCSliders01
Pure-CSS Netflix Show Carousel

スライダーとひとことで言っても様々な表現があります。今回は集められているスライダーの中でも気になったものをピックアップしてみました。

詳しくは以下

OSCSliders02
Pure CSS, annotated linear carousel
矢印などのナビゲーションがなくとてもシンプルなスライダーです。画像全体がクリックで動作反応する仕様です。
 
 
 
OSCSliders03
Simple Carousel Pure CSS
フェーディング効果と小さなドットと矢印のナビゲーションがあるタイプのスライダー。UIとして、とても分かりやすいですね。
 
 
 
OSCSliders04
Pure CSS image carousel
写真のようなフレーム付きのスライダーです。とても単純なコードで作られているので、どんなサイトにも簡単に適用できます。
 

原文では、上記の他にも汎用性の高いスライダーが紹介されています。最近ではjavascriptを利用せず、CSSコードで様々なスライダー表現ができるようになりました。javascriptがわからない、使いたくないという方は是非ご活用ください。

10 Free Open Source Carousel Sliders Built With Pure CSS

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればこちらからご連絡ください。即刻削除いたします。
posted 08:30  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る