初心者におすすめ！「jQueryでスライドショー」

2012-11-30 21:32

jQueryプラグインにはたくさんのスライダー系プラグインがあります。
私のお気に入りは、「bxslider」です。

一通りの動きがカバーできるため、一度利用すると色々と応用をしたくなります。

基本的にはよくあるjQueryプラグインと同じです。
まずは下記サイトからファイルをダウンロードします。

bxSlider - 右上の「Download」からダウンロードします。
jQuery - jquery.jsをダウンロードします。

bxSliderのダウンロードしたZIPファイルを解凍した中に含まれている、
jquery.bxSlider.jsと、jquery.jsをサーバーへ。

<hear>から</head>の間にまず下記を書き込みます。
<script type="text/javascript" src="jquery-1.×.×.js"></script>
<script type="text/javascript" src="jquery.bxSlider.js"></script>

続いて同じように<head>内に動作を指示させます。
<script type="text/javascript">
$(document).ready(function(){
    $('#slider').bxSlider({
        auto: true, //自動再生
        pause: 5000, //静止時間
        speed: 1000, //エフェクトのスピード
        mode: 'horizontal', //エフェクトの種類
        pager:true, //ページャーの有無
        prevText: '<', //前へのテキスト
        nextText: '>' //次へのテキスト
        });
});
</script>

あとはスライドさせたい写真や要素を<body>内に記載します。

以上で簡単に設定ができます。
<ul>でくくりましたが、<div>でも平気です。

もちろん、ページ表示や、矢印などスタイルシートでレイアウトを整えることが望ましいですね。

ちなみに、「bxSlider」からダウンロードした中のファイルにjquery.easing.1.3.jsというファイルもありますが
スライドのモーションなどを変更したい時に利用するので簡単に導入したい方は特に必要ありません。
慣れてきて特に凝ったサイトに利用したいなどには有効に活用できます。

「bxslider」のサイトからデモもご覧いただけます。
説明がいらないぐらい、実装が簡単ですよ。

簡単・高性能な「bxslider」を是非利用してみてください。

ちなみにサンプルはこちらです。

このコラムに類似したコラム

widthの発音中島俊治 - パソコン講師（2013/07/28 22:16）

HTML5は花火を描けます中島俊治 - パソコン講師（2013/07/27 21:57）

HTML5は図形を描くことができます中島俊治 - パソコン講師（2013/07/26 17:28）

フェイスブックは、スマホ用カバー写真で差をつけろ！小菅太郎 - ITコンサルタント（2012/11/26 15:13）