使用方法
リスト要素のパネルをスムーズなアニメーションでスライドさせるスクリプト「Easy Slider」をcss globeから紹介します。
Easy SliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。
Easy Sliderからファイル一式をダウンロードします。
Easy Slider 1.7 - Numeric Navigation jQuery Slider
HEAD要素にjQueryとEasy Sliderプラグインを呼び出すコードを記述します。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="easySlider.js"></script>
続けてHEAD要素にEasy Sliderを呼び出すスクリプトを記述します。
オプションでいろいろな機能やアニメーションを設定できます。
例
<script type="text/javascript">
$(function(){
$("#slider-main").easySlider({
prevText: '<< 前へ', // 戻るボタンのテキスト設定
nextText: '次へ >>', // 進むボタンのテキスト設定
auto: true, // 自動スクロール設定
speed: 3000, // スクロールスピード設定
pause: 3000, // 表示時間設定
continuous: true, // アニメーションのループ設定
});
});
</script>
Easy Sliderのオプション設定
Easy Sliderは見た目や機能を変更するオプションが用意されています。
prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next', controlsShow: true, controlsBefore: '', controlsAfter: '', controlsFade: true, firstId: 'firstBtn', firstText: 'First', firstShow: false, lastId: 'lastBtn', lastText: 'Last', lastShow: false, vertical: false, speed: 800, auto: false, pause: 2000, continuous: false, numeric: false, numericId: 'controls'
- prevId
- [Previous]ボタンのid属性を設定します。
- prevText
- [Previous]ボタンのテキスト設定です。
デフォルトは Previous です。 - nextId
- [Next]ボタンのid属性を設定します。
- nextText
- [Next]ボタンのテキスト設定です。
デフォルトは Next です。 - orientation
- スライドを縦にするか横にするかの設定です。
デフォルトは横スライドで、縦にスライドさせたい場合はorientationの値を vertical に設定します。 - speed
- アニメーションのスピードをミリ秒で設定します。
デフォルトは800ミリ秒です。 - controlsShow
- コントロールの表示設定です。
デフォルトは true です。 - controlsBefore / controlsAfter
- コントロール（[Previous]/[Next]ボタン）の前後に指定したタグを挿入できます。
例：
controlsBefore:'<div id="controls">',
controlsAfter:'</div>', - controlsFade
- 画像の最初や最後になった際に、[Previous]ボタンや[Next]ボタンを自動的に非表示にさせることができます。
デフォルトは false で、true に設定すると自動でボタンの表示・非表示を切り替えます。 - firstShow / lastShow
- true に設定することで、FirstボタンやLastボタンを表示させることができます。
- auto
- 自動的にスライドするかどうかの設定です。
デフォルトは false で、自動的にスライドしません。 - pause
- アニメーション後、コンテンツの表示時間をミリ秒で設定します。
- continuous
- アニメーションをループ設定させるかどうかの設定です。
デフォルトは false で、ループしません。 - numeric (NEW!)
- ページ番号ナビゲーションの設定です。
デフォルトは false で、true に設定するとページ番号ナビゲーションが表示されます。 - numericId (NEW!)
- ページ番号ナビゲーションのid属性を設定します。
BODY要素にスライドさせたいコンテンツを記述します。
<div id="slider"> <ul> <li>スライドコンテンツ</li> </ul> </div>
コンテンツにあわせてCSSを調整します。
知っておくと得するノウハウ
[Next]/[Previous]の表示は、Easy Sliderのダウンロード素材の中にあるscreen.cssでコントロールしています。そこではleftで指定しているため、上の階層でマージンやセンタリングをしていると、表示が崩れてしまいます。
表示が崩れた際は、left指定をmargin-leftに変更するだけで簡単に修正できます。
#slider1next, #slider1prev{
margin-left:-30px;
}
#nextBtn, #slider1next{
margin-left:450px;
}