jQueryを使って写真・パネルをスライドさせよう！

By oota – 2009/07/28

今回は jQueryを使って写真やコンテンツなどをスライドさせたいと思います。
参考サイトはhttp://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-slidingです。
それでは早速実装しましょう！

1.必要なファイルをダウンロードする。

下記サイトページ上部の　”Download easySlider1.5.zip”　をクリックしてファイルをダウンロードしてください。
http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

使用するファイルは

・0.1html or 0.2html or 03.html と
・js/jquery.js と
・js/easySlider.jsと

cssとjsは各htmlに記述されています。実際に使う場合は別ファイルとして読み込んであげてください。下記がソースです。

css

/* Easy Slider */
 
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider, #slider li{ 
		/* 
			define width and height of container element and list item (slide)
			list items must be the same size as the slider area
		*/ 
		width:696px;
		height:241px;
		overflow:hidden; 
		}
	span#prevBtn a {
		background:	url(images/a_btn.gif) 0 0 no-repeat;
		background:	#222;
		display:block;
		height:50px;
		width:150px;
		float:right;
		}
	span#nextBtn{}					
 
/* // Easy Slider */

js

<script type="text/javascript">
	$(document).ready(function(){	
		$("#slider").easySlider();
	});
</script>

2.スライドボタンのカスタマイズ

必要があれば　”nextボタン”　や ”Previousボタン” の画像化も簡単にできます。

ご丁寧にも

1 2	span#prevBtn {} span#nextBtn{}

と、ｃｓｓが用意されているので、span#prevBtn　等を　span#prevBtn　a　として、

	span#prevBtn a {
　　　　　　　text-indent:　-10000em;
                over-flow: hidden;
                font-size: 0.1px;
		background: url(images/???.gif) 0 0 no-repeat;
		background: #222;
		display: block;
		height: 50px;
		width: 150px;
          }

などと、書き換えれば画像ボタンの完成です。

テキストを書き換えたい場合は、”easySlider.js”

var defaults = {
			prevId: 		'prevBtn',
			prevText: 		'Previous',
			nextId: 		'nextBtn',	
			nextText: 		'Next',
			orientation:	'', //  'vertical' is optional;
			speed: 			800			
		};