画像が自動的に切り替わる「スライドショー」を表示する方法

画像が自動的に切り替わる「スライドショー」を表示する方法をお伝えします。

画像が自動的に、横にスライドしていくと、ホームページの見栄えがとても良くなりますよね。具体的には、下記のような「スライドショー」になります。

（５秒ごとに切り替わります）

このスライドショーは、HTMLだけでは実現できないので、「jQuery（ジェイクエリー）」というものを使います。

ただ、「コピペ」だけで、簡単に実現できるので、ぜひやってみてくださいね。

■ 画像が自動的に切り替わる「スライドショー」を表示する方法の手順

手順１：スライドショーを表示したいページのヘッダー
（</head>の真上）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、ヘッダーに貼り付けてください。

【注意】

ソースを入れるページは、スライドショーを表示したいページです。
そして、ソースを入れる場所は、ヘッダーの中で、</head>の真上に入れます。

ソースを入れる場所については、十分、注意してください。
（ヘッダーの中に入れないと、動かないです）

手順２：スライドショーを表示したい箇所に、下記のソースを入れる。

上記のソースを使うときは、「画像のファイル名」を変更してください。

現在は、「gazou1.jpg」などにしていますけど、この画像のファイル名を、表示させたいファイル名に変更する、という形ですね。

なお、上記のソースでは、４つの画像を順番に表示するようにしていますが、５つの画像を順番に表示させたい場合は、１行増やせば良いだけです。
（逆に、表示させたい画像を減らす場合は、１行消せば良いだけです）

あとは、スライドショーが正常に表示されていることを、確認してみてくださいね。

【注意】

「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、 HTMLファイル（index.htmlファイルなど）と同じ場所に、画像を保存するようにしてください。

■【カスタマイズ方法】画像の大きさ（横幅）を変更する方法

画像の大きさ（横幅）を変更するには、head 内に入れたソースの「slideWidth: 400,」の数字を変更することで、横幅を変更できます。

現在は、横幅は400になっているので、たとえば、300 などに変更するという形です。

なお、このスライダーの特性上、slideWidth の数字を大きくしすぎると、スライダーが動作しないことがあるので注意してください。

もし、ホームページの横幅いっぱいにスライダーを広げたい場合は、「slideWidth: 400, // 画像の横幅」の一行を削除することで、横に広がります。