Webデザイン

コピペで実装!jqueryでスライドショーを自作する方法

mountains

Webサイトの製作時に、スライドショーを導入しようと思うことがたまにあります。

しかし、「jquery スライドショー」のように検索をかけると、どれもライブラリの紹介の記事ばかり…

正直、新しいライブラリを入れまくるのは苦手…

できれば、新しい事を覚えずにスライドショーを作れればなあ…ということで、今回準備をしてみました。細かな解説も加えているので、是非読んでみてくださいね。

jqueryのスライドショーのデモ

今回、CODEPENのコード埋め込み機能を使って準備しました。

「Result」のボタンのみをアクティブにして、スライドショーを確認してみてください。

See the Pen MopYBE by Kurosu Ryo (@ryokurosu) on CodePen.0

一工夫加えて、スライドショーの現在地や横ボタンで移動できるように実装しています。

スライドショーのコード(コピペOK!)

まず、理屈や仕組みは抜きにして、とにかくコピペで使えれば十分という方の為に、コードを下記にまとめておきます。

HTMLのコード

CSSのコード

JavaScriptのコード

スライドショーのポイント

それでは、今回のスライドショーのポイントをお伝えしていきます。このポイントが理解できれば、そのうち自分で実装することも可能でしょう。

ポイント1 CSSのulの設定

まず一つめのポイントは、スライドショーのul要素の幅の問題です。

ここをwidth:1000%と設定していますが、横幅を半端なくでかくすることが重要です。

理論的には、ここの横幅は出かければいくつでも大丈夫です。10000%でもOKです。

ただ、気持ち悪いので、これくらいの数にしておきましょう。

ポイント2 jsのtranslate指定

2つめのポイントは、javascriptでtranslateを操作していることです。

実際、スライドショーの画像は、要素からはみ出てoverflow:hiddenによって消されているだけで、右側に存在しています。

そこで、translateの数値を変更することで、ズレて出現してくるのです。

ポイント3 一番最初の画像に戻るjsコード

ほとんどポイント1,2で全て完結してしまうのですが、このコードが無いと真っ黒スライドショーになるので紹介します。

今回紹介したコードでは、liの要素を勝手に数えてくれて、スライドの数だけtranslateの値を変えるというJavaScriptのコードにしましたが

このコードが無ければ、延々と右にスライドされていきます。

すると、途中から画像がない場合は、真っ黒画面になってしまうのです。

jqueryでスライドショーを自作する方法のまとめ

jqueryはかなり扱いやすいのですが、何でもかんでもライブラリライブラリとなって、結果的にコードを追加しまくる羽目になることが多いです。

そしてさらに怖いのは、その中の仕組みが全く分からずに使えてしまうことです。

そんな方の為に、今回はjqueryのスライドショーの紹介をしました。出来る限りコピペで使えるようにしているので、是非使用してみてくださいね。

それでは、最後まで読んでいただき、ありがとうございました。