Webの記録

easySlider1.7.jsを使ってFlashのようなスライドショーにチャレンジ♪

投稿日:

この記事は約 5 分で読めます。

「easySlider1.7.js」を使って、数枚の画像のスライドショーを作りたいと思います。

自動で画像がスライドしますが、見ている人の意思で前後の画像へ戻したり進めたりする事が出来るスライドショーです。
今回は、サムネイルもテキストも入れないカタチのスライドショーにします。

easySlider1.7.jsを使ったスライドショーの画面イメージ

設置方法。

下準備♪

スライドしたい画像を数枚用意します。
スライドした枚数分だけ画像を用意します。サムネイル画像は今回ナシです。

jsファイルのダウンロード。

配布サイト(Easy Slider 1.7 – Numeric Navigation jQuery Slider)から、「easySlider1.7.js」をダウンロードします。
jQueryのjsファイルも準備。 (現在は、「jquery-1.6.2.min.js」)

headerの記述。

HTML ファイルのheaderでjsファイルの関連付けの記述。

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
初期化コードを記述をheaderに記述。

「auto」は自動的に次の画像に移動するかどうかで、「continuous」自動的に次の画像に移動して最後までいった時に最初に戻るかどうか・・・という意味。

<script type="text/javascript">
  		$(document).ready(function(){	
 			$("#slider").easySlider({ 
				auto: true,  
				continuous: true 
			}); 
		});
</script>
 body部分に最初に表示する画像の設定を記述。

スライドさせたい画像やHTMLの要素をliの中に記述する。

<div id="slider">
<ul>
	<li><a href="#"><img src="images/sample_img1.jpg" alt="1" /></a></li>
	<li><a href="#"><img src="images/sample_img2.jpg" alt="2" /></a></li>
	<li><a href="#"><img src="images/sample_img3.jpg" alt="3" /></a></li>
	<li><a href="#"><img src="images/sample_img4.jpg" alt="4" /></a></li>
	<li><a href="#"><img src="images/sample_img5.jpg" alt="5" /></a></li>
</ul>
</div>
<!-- /#slider -->
CSSを記述。(位置などの調整をする)

スライドの左右のボタンも自作出来たら自作で・・・。私は今回配布サイトのをダウンロードしてそのまま使ってみました。

お好みで「easySlider1.7.js」調整。

ブラウザで確認後、 もし切り替えの具合など調整したい時の為に・・・。

  • 「speed」・・・ 切り替えのスピード(数字が小さいほど早い)
  • 「pause」 ・・・自動に切り替わるまでの時間(数字が小さいほど早い)

配布サイト(Easy Slider 1.7 – Numeric Navigation jQuery Slider)では、他にも良さそうなデモを見せてくれています。そちらを参考にされると良いと思います♪

ライセンス・・・MITもしくはGPL

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

WordPressで「ブルートフォースアタック」や辞書攻撃にあった時にやってみたこと。

この記事は約 1 分で読めます。 昨年(2013年8月)、ロリポップのレンタルサーバーでWordPressサイトへの改ざん事件がありました。 その後も、「ブルートフォースアタック」や辞書攻撃があってい …

no image

スマートフォン用サイトで、タップで電話をかけさせたい時

この記事は約 1 分で読めます。 スマートフォン用のサイトで、必要になったのでメモ。 ボタンをタップした時に電話をかけさせたい時の記述と、郵便番号などの数字を電話番号と間違えて勝手に電話番号のリンクが …

no image

lang属性に指定できる言語コード

この記事は約 1 分で読めます。 忘れた頃に海外向けの小規模な案件で、外国語のページ制作のお話があったりします。 そんな時に「lang属性に指定できる言語コード」を毎回調べるのが面倒なので、自分用のメ …

no image

Yahoo!アクセス解析を設定してみました!

この記事は約 1 分で読めます。 2013年10月30日にリリースされた「Yahoo!アクセス解析」。 まだまだリリースされて日が浅いのでGoogle Analyticsほどの資料が見つからないのです …

no image

WordPress お問い合せフォームプラグイン「Trust Form」を試してみた♪

この記事は約 1 分で読めます。 今回は、WordPressのお問い合せフォーム用プラグイン「Trust Form」を試してみました。 ・・・と言っても、まだローカル環境でのテスト操作なので全ての実験 …