この記事は約 4 分で読めます。
今回も、画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。
今回チャレンジしてみたのは、「s3Slider.js」を使ったFlashのようにスムーズな動きをするスライドショーです。
とても簡単なので、わりと短時間でキレイなスライドショーが出来ました♪
設置方法。
下準備。
スライドしたい画像を数枚用意します。
スライドした枚数分だけ画像を用意します。サムネイル画像は今回ナシです。
jsファイルのダウンロード。
配布サイト(http://www.serie3.info/s3slider/)より 「s3Slider.js」をダウンロードします。
headerの記述。
HTML ファイルのheaderでjsファイルの関連付けの記述。
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="js/s3Slider.js" type="text/javascript"></script>
スライドショー用のScriptをheaderに記述。
「timeOut: 3000」の部分の数字を小さくすると、画像の切替が早くなります。
<script type="text/javascript"> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 3000 }); }); </script>
body部分に最初に表示する画像の設定を記述。
liの画像を上から実行する。表示したい枚数だけliで記述。Divのid名はheaderのScriptの部分と同じ。liについてclass名は取ったら動かなくなります。
画像のタイトル名の前の「span」はテキストの帯の位置を指定します。
<div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <a><img src="画像1のパス" /></a> <span class="top"><strong>画像1のタイトル</strong> 画像1の説明</span></li> <li class="sliderImage"> <a><img src="画像2のパス" alt="2" /></a> <span class="top"><strong>画像2のタイトル</strong> 画像2の説明</span></li> </ul> </div>
CSSを記述。(配布サイトのをいじると楽だと思います)
今回は、テキストの位置を上下のみにしましたが、左右にする事も出来ます。
配布サイト(http://www.serie3.info/s3slider/)にデモがありますので、こちらを参考にされると良いと思います。
【スライダー系の関連かもしれない記事】
- 「jQuery「Supersized」でフルスクリーンのスライドショーを簡単設置」
- 「WordPressプラグイン「NIVO slider light」でリッチなスライドショー簡単設置」
- 「WordPressプラグイン「Easing Slider」でスライドショー簡単設置」
- 「WordPress簡単にスライダーを投稿内に追加出来るプラグイン「SlideDeck」」
- 「軽量で簡単に設置出来るjQueryスライダー「FlexSlider」。」
- 「simplegallery.jsでシンプルだけど高機能なスライドショーを作ってみた♪」
- 「jquery.nivo.slider.jsを使ってリッチなスライドショーにチャレンジ♪」
- 「easySlider1.7.jsを使ってFlashのようなスライドショーにチャレンジ♪」
お久しぶりです。
もっちゃまの足跡からこちらに、そしてドラムの世界を回ってここにたどり着きました。
うう~~~~ん!!奥が深い!!
何年も前の、クローバーの成長日記を思い出します。
ドラム、深めておられるんですね。
私も何か始めたい病にかかってきました。
これからもまたお邪魔させて頂きますね。
うう…でも、ここまで来れるかなぁ…心配^^;
とみぃさんへ。
お久しぶりです!!お元気でしたか??
コメント、ありがとうございます!!!
昨日、ふと気になって・・・とみぃさんの所へ訪問しました。
すっかりご無沙汰していたので、もう忘れられているかなぁ~と思いましたが、覚えていてくださって・・・。
そして、まさかココまでいらっしゃると思いませんでした。
長旅、お疲れ様でした~!!!
今度は、もっと最短で回れるように・・・考えておきますね。^^
クローバー日記。
もう何年前になるんでしょう。。。
懐かしいです~。
とみぃさんは、何を始められるのかな?
新しい事をするのは、何だかわくわくしますね♪
何か面白い事、見つけられたら教えてくださいね。
私はWebとドラムの世界を、もっと深めていきたいと思ってます。
ココでたくさんの「わくわく」を表現出来るように頑張りますね♪