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

jQuery Slider²

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

を記述すれば完成です。

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


あわせてお読みください

5 Comments

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

    • ぱんにゃっと

      2013/04/08 at 8:18 PM

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

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

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

        • ぱんにゃっと

          2013/04/08 at 8:51 PM

          ご指摘のとおりです。
          <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と申します。
    とても便利で実装したいことにピッタリでしたので、使わせていただきたいのですが、一つ質問がありコメントさせていただきました。

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

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

コメントを残す

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