• かちびと.net

    導入も手軽でiPhoneなどにも自動でレイアウトを最適化するシンプルなイメージスライダーを実装出来るjQueryプラグイン・Slidesのご紹介。Media Queriesもいらないみたいです。いい選択肢が増えました。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

導入も手軽でiPhoneなどにも自動でレイアウトを最適化するシンプルなイメージスライダーを実装出来るjQueryプラグイン・Slides

スポンサーリンク

レスポンシブWebデザイン対応のイメージ
スライダーです。かなり沢山出てきました
ね。こちらはcssやHTMLもシンプルで済む
のでコードをシンプルにしたい際は使い
勝手が良さそうです。こうして選択肢が
増えるのは凄くうれしいですね。

続々出てきますね・・・こちらもレスポンシブWebデザイン対応のスライド。こちらはMedia Queriesを使用していないようなので、いつも通りのマークアップで手軽に実装出来るのが特徴みたいです。

Slides


パッと見は普通ですが、どのようなモニターサイズでもレイアウトを崩すことなくスライダーとして機能してくれます。slidesjsベースで作っているようですので2つ先、3つ先の画像に移動しても余計なアニメーションがありません。

スクリーンショット



スマートフォンで閲覧しても自動でスライドごとリサイズしてくれます。少しだけ動きがアレですかね?

コード

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
	<script src="js/slides.js"></script>
	<script>
		$(function(){
			$("#slides").slides({
				responsive: true
			});
		});
	</script> 

いつも通り本体とプラグインを読み込んでセレクタを書きます。

マークアップ

<div id="slides">
	<img src="slide-1.jpg" width="100%" alt="Slide 1">
	<img src="slide-2.jpg" width="100%" alt="Slide 2">
	<img src="slide-3.jpg" width="100%" alt="Slide 3">
	<img src="slide-4.jpg" width="100%" alt="Slide 4">
	<img src="slide-5.jpg" width="100%" alt="Slide 5">
	<img src="slide-6.jpg" width="100%" alt="Slide 6">
	<img src="slide-7.jpg" width="100%" alt="Slide 7">
</div>

指定したセレクタ内に画像を並べるだけ。CSSはスライドの場所やページネーションや左右のナビゲーションを配置すればいいだけみたいです。Media Queriesいらないのは楽でいいかも。

マークアップやスタイリングが楽なのは個人的にはありがたい。ライセンスは Apache License Ver.2.0となっています。ダウンロードとデモは以下よりどうぞ。

Slides on github / Demo

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services