jQuery 2014-09-08

画像や要素を簡単にスライド出来る jQueryスライダー Easy Slider 使い方

easyslider

今回は、画像や要素をスライダーを実装出来るjQueryプラグイン【Easy Slider】のご紹介です。
実装も簡単に設置出来ますし、オプションも様々なオプションが用意されているEasyなSliderプラグインです。
また、オプションで【ページ番号ナビ】【アニメーションのスピード調整】なども用意してあります。
下記に動作デモサイトも、用意していますのでご参考にどうぞ。

動作デモサイト

jQueryプラグイン【Easy Slider】の実装には、下記リンク先より必要ファイルをダウンロードが必要となります。

Easy Slider ダウンロード

Easy Slider 使い方

それでは、【Easy Slider】の使い方を説明していきたいと思います。

必要ファイルの読み込み

まずは、head内にjQuery本体とダウンロードしたファイルの中にあるeasySlider1.7.js(記事当時のバージョン)ファイルを読み込みます。
ファイルの階層などは、ご自身の階層に合わせて下さい。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script src="js/easySlider1.7.js"></script>

Script

スライダーを実装したい要素にid名またはclass名で指定します。
今回は、要素名に#sliderと名づけています。
また、すぐにでも使いそうなオプションも説明していますので、ご参考にご覧ください。

	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true, //自動でスライド設定
				continuous: false, //ループの設定
				numeric: false, //ページ番号ナビ
				speed : 500, //アニメーションのスピード
				pause : 3000, //スライド後の持続時間
				controlsShow : true, //コントロールの表示・非表示
				
			});
		});	
	</script>

この他にも、様々なオプションが【Easy Slider】では、用意されております。

prevId: 		'prevBtn',
prevText: 		'Previous',
nextId: 		'nextBtn',	
nextText: 		'Next',
controlsShow:		true,
controlsBefore:	'',
controlsAfter:		'',	
controlsFade:		true,
firstId: 		'firstBtn',
firstText: 		'First',
firstShow:		false,
lastId: 		'lastBtn',	
lastText: 		'Last',
lastShow:		false,				
vertical:		false,
speed: 		800,
auto:			false,
pause:			2000,
continuous:		false, 
numeric: 		false,
numericId: 		'controls'

HTML

次に、HTMLの準備をしていきます。
先ほど指定したid名を、div要素に記載します。

	<div class="slider-wrap">
		<div id="slider">
			<ul>
				<li><img src="img/01.jpg"></li>
				<li><img src="img/02.jpg"></li>
				<li><img src="img/03.jpg"></li>
				<li><img src="img/04.jpg"></li>
				<li><img src="img/05.jpg"></li>
			</ul>
		</div>
	</div>

CSS

最後にCSSでスタイルを調整していきます。
【NEXT】【PREV】の画像は、ダウンロードしたフォルダの中に入っています。
階層などには、ご注意下さい。
ページ番号ナビを利用しない方は、記載の必要性はありません。

.slider-wrap{
	width:660px;
	position:relative;	
	}
#slider{}
#slider li,#slider2 li{
	width:660px;
	height:408px;
	overflow:hidden;
	}
/*---------------------------------------------------------
  		next prevスタイル
---------------------------------------------------------*/	
#prevBtn, #nextBtn{ 
	display:block;
	width:30px;
	height:77px;
	position:absolute;
	left:-30px;
	top:177px;
	text-indent:-99999px;
	}	
#nextBtn{ 
	left:660px;
	}														
#prevBtn a, #nextBtn a{  
	display:block;
	width:30px;
	height:77px;
	background:url(img/btn_prev.gif) no-repeat 0 0;	
	}	
#nextBtn a{ 
	background:url(img/btn_next.gif) no-repeat 0 0;	
	}
/*---------------------------------------------------------
  		ページ番号ナビスタイル
---------------------------------------------------------*/
ol#controls{
	margin:1em 0;
	padding:0;
	height:28px;	
	}
ol#controls li{
	margin:0 10px 0 0; 
	padding:0;
	float:left;
	list-style:none;
	height:28px;
	line-height:28px;
	}
ol#controls li a{
	float:left;
	height:28px;
	line-height:28px;
	border:1px solid #ccc;
	background:#fff;
	color:#ccc;
	padding:0 10px;
	text-decoration:none;
	}
ol#controls li.current a{
	background:#000;
	color:#fff;
		}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

上記のまでのコードを記載すれば、無事に実装の完了となります。
特に、迷ったり・難しい所もありませんので、簡単に実装出来るんではないんでしょうか?
とても簡単に実装出来るスライダープラグインですので、知っておいても損は無いと思います。

動作デモサイト

オススメ書籍・アイテム

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

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

PREVIOUS badge

【PhotoShop】様々な形状のバッジ フリー カスタムシェイプ

NEXT iphone-6

【商用利用無料】 iPhone6 モックアップ用 PSD 素材