ウェブ学のすすめ

Study of Web Design & Programing

jQueryで作る横スライド「easySlider」

jQuery

横スライドギャラリーが作れるjQueryプラグイン「easySlider.js」を試してみました。

プレビュー

↓別ウィンドウを開いて見る
jquery easySlider

ポイント

easySlider.js

Easy Slider 17 Numeric Navigation jQuery Slider | CSS Globe

↓基本

$(function(){
  $("#slider").easySlider();
});

↓オプション

$(function(){
  $("#slider").easySlider({
	controlsShow:false, //コントロールバーの表示・非表示
	speed:1200,　//スクロール速度
        pause: 3000,　// 表示時間
	auto:true,　//自動再生
	continuous:true,　//ループするかどうか
        prevText: '<< 前へ',　//戻るボタンのテキスト
        nextText: '次へ >>'　//進むボタンのテキスト
        vertical: true, //縦方向にスライドするかどうか
  });
});

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jquery easySlider</title>
<link rel="stylesheet" href="style.css">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/easySlider1.7.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<div id="slider">
  <ul>
    <li><img src="http://webgaku.hotcom-web.com/images/easyslider/01.jpg"></li>
    <li><img src="http://webgaku.hotcom-web.com/images/easyslider/02.jpg"></li>
    <li><img src="http://webgaku.hotcom-web.com/images/easyslider/03.jpg"></li>
    <li><img src="http://webgaku.hotcom-web.com/images/easyslider/04.jpg"></li>
    <li><img src="http://webgaku.hotcom-web.com/images/easyslider/05.jpg"></li>
    <li><img src="http://webgaku.hotcom-web.com/images/easyslider/06.jpg"></li>
    <li><img src="http://webgaku.hotcom-web.com/images/easyslider/07.jpg"></li>
    <li><img src="http://webgaku.hotcom-web.com/images/easyslider/08.jpg"></li>
  </ul>
</div>
</div>
</body>
</html>

CSS

@charset "utf-8";

body {
	background-image:url(images/cloth-b3.png);
}
#container {
	width:600px;
        height:420px;
	margin:0 auto;
	padding:70px 0 0 57px;
	background-image:url(http://webgaku.hotcom-web.com/images/easyslider/bg.png);
	background-repeat:no-repeat;
	background-position:left top;
}

#slider ul {
	list-style-type:none;
	margin:0;
	padding:0;
}
#slider li {
	width:481px;
	height:319px;
}

javascript

$(function(){
  $("#slider").easySlider({
	controlsShow:false,
	speed:1200,
	auto:true,
	continuous:true
  });
});