超簡単！jQueryスライドショーを10分で実装する方法

（注＊2014年1月24日に公開された記事を再編集したものです。）

jQueryの知識はほぼ必要なし！

ホームページにスライドショーを10分で設置できる方法。

サイトのトップページや作品集にスラドショーをつけてみたいけど、ほどんどjavaやjQueryの知識がない！

「それにjQueryって面倒臭そうだし！」

けど、10分もあればスライドショーが完成します。
最初はコピペで大丈夫！ファイルをダウンロードしてHTMLとCSSにタグを少し追加すれば完成！さっそく簡単にスライドショーが設置できる方法を紹介します。

１.bxSliderサイトからファイルダウンロード

bxSliderの公式サイト(http://bxslider.com/)に行き、右上の「Download」ボタンをクリックして必要なファイルをダウンロード。

ZIPファイルの中

この中から今回は3ファイルだけ

※心配ありません。上記の3ファイルあれば動きます。

２.HTMLファイルのHEAD内にリンクを記述

「filejquery.bxslider.css」と「filejquery.bxslider.min.js」の2ファイルと「jquery.min.js」をhead内に記述します。

※ファイルのパスはそれぞれアップした場所に合わせて変更して下さい。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet" />

３.HTML内にスライドさせたい画像を記述

「＜ul class=”bxslider”＞～＜/ul＞」の中にスライドさせたい画像を入れます。画像は何枚でもオーケー。

<ul class="bxslider">
  <li><img title="水滴" alt="" src="images/bxslider/image9.jpg" width="590" height="300" /></li>
  <li><img title="傘" alt="" src="images/bxslider/image10.jpg" width="590" height="300" /></li>
  <li><img title="カメラと男性" alt="" src="images/bxslider/image11.jpg" width="590" height="300" /></li>
</ul>

４.HEAD内にbxSliderの呼び出しをかけます

bxSliderの呼び出し設定をすればスライドが動きます！ 下記のjavascriptをhead内にコピペすればおしまい。ほぼ10分でスライダーが完成！

<script type="text/javascript">
        $(document).ready(function(){
            $('.bxslider').bxSlider({
            	auto: true,
            });
        });
</script>

補足：充実のオプション設定

bxSliderが凄いのはこれだけじゃない！オプションも充実！一例をあげますね

<script type="text/javascript">
        $(document).ready(function(){
            $('.bxslider').bxSlider({
            	//ここに書くだけ
            });
        });
</script>

・自動スライドをしたい場合「auto: true,」
・立て回転させたい場合「mode: ‘vertical’,」
・画像を一枚、一枚を2000秒静止させたい場合「pause: 2000,」
・スライドではなく「ふわっ」とスライドさせたい場合「mode: ‘fade’,」
※公式オプションページ（http://bxslider.com/options）

まとめ

どうですか難しくないですよね？最初はコピペで問題ないと思います。ちょっと慣れてきたら充実しているオプションを使って素晴らしいスライドショーを完成させてください。このスライドショーが多くの人に役立てば幸いです。