ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

jQueryプラグイン, スライダー

div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」

画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」

jQuery Slider²

「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>コンテンツ1</div>
<div>コンテンツ2</div>
<div>コンテンツ3</div>
<!– 以下スライド分 –>
</div>

を記述すれば完成です。

以下のソースは参考まで。

<!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>

この記事と関連してると思われる記事:


5 コメント

  1. ejisan

    が抜けていませんか?
    JQuery初心者なので間違っているかもしれませんが・・・

    • ぱんにゃっと

      コメントありがとうございます。コードを入れられたのでしょうか?
      ご質問の該当部分が表示されていません。

      [php]~[/php]でそのコードを囲んでいただくか(半角にして下さい)、または全角文字で入力していただくと表示されます。

      • ejisan

        申し訳御座いません。
        <SCRIPT>が抜けていませんか?
        というコメントでした。
        Jqueryのコードの部分がDWで反応しなかったもので・・・

        • ぱんにゃっと

          ご指摘のとおりです。
          <head>部分には

          <script type="text/javascript">
          $(function() {
          $(‘#slider’).slider({  //スライドさせる部分の#id名
          showControls: true, //以下オプション
          autoplay: true,
          showPosition: true,
          hoverPause: true,
          wait: 3500,
          fade: 500,
          direction: “left”
          });
          });
          </script>

          と記述すべきです。訂正させて頂きます。
          ご指摘大変ありがとうございました。

  2. nagao

    初めまして。nagaoと申します。
    とても便利で実装したいことにピッタリでしたので、使わせていただきたいのですが、一つ質問がありコメントさせていただきました。

    スライダー下の●のリンクボタンです。自分のボックスが表示されているときに、例えば2番目のボックスが表示されているときに2番目のボタンの●を押すと画面が白くなってしまいます。
    もしできましたら、自分のボックスを押したときにも、そのボックスを表示するようにしたいと思っています。

    お時間ありましたら教えてください。
    よろしくお願いいたします。

Leave a Reply

Theme by Anders Norén