【注意】2019/10 こちらの記事は、古くなったため記事をリライトして引越ししいたしました。→ 最新の情報はこちらをご覧ください。
「jQuery Slider2」は、簡単に画像や文字をスライドさせる軽量のJavaScriptです。
<div>～</div>で囲んだdiv要素ごとにスライドさせるという便利なスライダーです。
サンプルはこちら
→ 「jQuery Slider2」サンプルページ
「jQuery Slider2」の設置方法は続きをご覧下さい。
まず、jQuery Slider2のサイトから、「Download stable（安定版）」をクリックして
jquery.slider.min.jsとjquery.slider.cssを一式ダウンロードします。<head>部分には
<script type=”text/javascript” src=”js/jquery.slider.min.js”></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”></script>
<link href=”css/jquery.slider.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript”>
$(function() {
$(‘#slider’).slider({ //スライドさせる部分の#id名
showControls: true, //以下オプション
autoplay: true,
showPosition: true,
hoverPause: true,
wait: 3500,
fade: 500,
direction: “left”
});
});
</script>
そして<body>部分に
<div id=”#slider”>
<div>コンテンツ１</div>
<div>コンテンツ２</div>
<div>コンテンツ３</div>
<!– 以下スライド分 –>
</div>
を記述すれば完成です。
以下のソースは参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis” /> <title>タイトル</title> <link href=”css/jquery.slider.css” rel=”stylesheet” type=”text/css” /> <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”></script> <script type=”text/javascript” src=”js/jquery.slider.min.js”></script> <script type=”text/javascript”> $(function() { $(‘#slider’).slider({ showControls: true, autoplay: true, showPosition: true, hoverPause: true, wait: 3500, fade: 500, direction: “left” }); }); </script> </head> <body> <h1>jQuery Slider2 サンプル</h1> <div id=”slider” style=”width: 500px;height: 300px; border: 1px solid #CCC;”> <div style=”background-image: url(img/img1.jpg);”> <h2>Page1</h2> <q>div要素をスライドさせます.</q> </div> <div style=”background-image: url(img/img2.jpg);”> <h2>Page2</h2> <q>画像もテキストもリンクも.</q> </div> <div style=”background-image: url(img/img6.jpg);”> <h2>Page3</h2> </div> </div> </body> </html> |
あわせてお読みください
「Nivo Slider」は画像をかっこよくスライドさせて見せたい方にぴったりの画像スライダーです。 16種類ものエフェクト効果があり、それらをランダムに使用す…
「jq-tiles」はお洒落なCSS3エフェクトが選べる画像スライドショー用jQueryプラグインです。CSS3ならではのふわっとしたエフェクトや立体感のあるエ…
Slider Pro 「Slider Pro」は多機能のスライダーを作ることができるjQueryプラグインです。このjQueryプラグインを使って、左右の画像を…
2013/04/08 at 8:05 PM
が抜けていませんか？
JQuery初心者なので間違っているかもしれませんが・・・
2013/04/08 at 8:18 PM
コメントありがとうございます。コードを入れられたのでしょうか？
ご質問の該当部分が表示されていません。
［ｐｈｐ］～［／ｐｈｐ］でそのコードを囲んでいただくか（半角にして下さい）、または全角文字で入力していただくと表示されます。
2013/04/08 at 8:43 PM
申し訳御座いません。
＜SCRIPT＞が抜けていませんか？
というコメントでした。
Jqueryのコードの部分がDWで反応しなかったもので・・・
2013/04/08 at 8:51 PM
ご指摘のとおりです。
＜ｈｅａｄ＞部分には
<script type="text/javascript"> $(function() { $(‘#slider’).slider({ //スライドさせる部分の#id名 showControls: true, //以下オプション autoplay: true, showPosition: true, hoverPause: true, wait: 3500, fade: 500, direction: “left” }); }); </script>と記述すべきです。訂正させて頂きます。
ご指摘大変ありがとうございました。
2014/12/02 at 7:11 PM
初めまして。nagaoと申します。
とても便利で実装したいことにピッタリでしたので、使わせていただきたいのですが、一つ質問がありコメントさせていただきました。
スライダー下の●のリンクボタンです。自分のボックスが表示されているときに、例えば２番目のボックスが表示されているときに２番目のボタンの●を押すと画面が白くなってしまいます。
もしできましたら、自分のボックスを押したときにも、そのボックスを表示するようにしたいと思っています。
お時間ありましたら教えてください。
よろしくお願いいたします。