ネットでよく見かける画像がクルクル切り替わるアレのことを「スライダー」、もしくはちょっとイケてる感じの言い方だと「カルーセル」というらしいです。
いったい何でできているのか、動かしているのか。
当然、JavaScript によって動かされているであろうということは薄々感じていました。そして、私はこの時点で、逃げ出したい衝動に……。逃げ出したい……？すでに逃げているのではないか？今こそ Web 制作に携わる者（自称）として、JavaScript と向き合うときが来たのではないか？もう逃げられない……。
？？？「ワードプレスだったら、『プラグイン』を使えば良くない？」
いえ、私はウェブデザイナー（自称）。コレばかりは、もう逃げられない。
カレーを作ると決めて、レトルトで作ったと言えるのか？
いや、言えるはずがなかろうて。
カルーセルとは
まず、「カルーセル」とは何かを調べてみました。なんとなく痛そうな響きですが……実際の意味は……
carousel：メリーゴーラウンド、回転式コンベアー
といった意味のようです。（weblio）
“カルーセル”は、くるくる回るモジュールなので、それが頭に定着すればしっくりきますね！
私が作りたいもの
さて、カルーセルについて調べるということは、何か実現したいデザインがあったからなのですが、それはざっくりこんな感じです。
よく見かけるカルーセルと違うところは、
・メインの写真が真ん中ではない
・メインの写真が拡大されている
・タイトル、説明が BOX 外にあるように見える
現時点で、この3つが少し厄介な部分なのかなと思っています。
それでも、レイアウト以外はいわゆる普通のカルーセルと動きに違いはないと思ってるので、出来ないはずはない！もはや、そう思って突き進むしかないのです。
スタンダードなカルーセルを作ってみる
まずは、スタンダードなカルーセルを作ってみることにしました。
これが作れなければ、何も始まりませんよね。
そもそもカルーセルは jQuery などのライブラリを利用すべきなのか、
JavaScript そのもので作るべきなのか。
自分自身で見定めるために、まずはライブラリを利用せずに JavaScript のみで作ってみることにしました。
メモ
以下、特にコードを解説できるほどの熟練度はないので割愛しますが、気になる方は CodoPen で確認ください。
ボタンで切り替わる画像１枚のシンプルなカルーセル
ボタンを押したら画像が切り替わるだけの、超シンプルなものを作ってみました。
See the Pen carousel_001 by MATSUDAI (@matsudai) on CodePen.
このやり方は、あらかじめ画像を１枚用意しておき、JavaScript でsrc属性の値を変更して表示させる画像を切り替えていくという感じのようです。
一枚の画像を JavaScript で画像そのものを切り替えているやり方なので、
私が目指しているデザインとは少し違います。
でも JavaScript 初心者の私にはとても勉強になる仕組みでした。
画像３枚が切り替わるカルーセル
少し発展させて上の1枚カルーセルを参考に、
３枚の画像で作ってみました。
See the Pen carousel_003 by MATSUDAI (@matsudai) on CodePen.
若干それっぽくなりましたが、、
でもこれも結局、並んでる画像がそれぞれ順番に切り替わっているだけなので、
もう一歩足りないですね。
でも着実に理想のカルーセルに近づいている気がします。
……。
滑らかに移動してるように見せるために手を加えようと試みましたが、
どうやらこのコードと滑らかに動かすためのコードの考え方は、根本的に仕組みが違うようでした。
滑らかに移動するカルーセル（ボタンで）
改めて、違う考え方でコードを作ってみました。
ここから急に難易度が上がったように感じます。
See the Pen carousel_005 by MATSUDAI (@matsudai) on CodePen.
動かした感じ、見た目上はカルーセルとして機能しているような気がします。。
ひとつ前に作ったカルーセルといったい何が違うのかというと、
画像のかたまりごとtransform: translateX( ◯◯);で移動させて切り替えを実現という点です。
さらに、あらかじめ画像を複製しておきループしているように見せています。
複製は JavaScript のinsertBeforeメソッドを使用してみました。
図のように、通常画像のかたまりを丸ごと左に動かすと、
スペースが空くので、あらかじめ複製しておくことで
ループしているように見せています。
ではそのまま左に移動させて、端っこにたどり着いたときどうなるのかというと
下の図のような処理をしています。
端っこにたどり着いたと同時（厳密には０秒で）に、最初の位置に戻してあげています。
ここまでは左に進む場合の処理なので、さらに右に進む場合の処理を入れていきます。
こちらもさらにinsertBeforeメソッドで画像のかたまりを複製しました。
（要素の後ろに複製するメソッドはないようです。たぶん……。）
逆向きの場合は、端っこの画像分移動したときに、
今度はまるっとひとかたまり分、逆に移動させます。（混乱する言い回しになってしまいましたので画像を確認ください！）
こうすることで、左右ともに無限ループしているように見せることができるのですね……。
……。
ここまでくると、だんだん“カルーセル”というものの仕組みがわかってきました。
あとは操作の面でドラッグで移動できるようにしたいのと、
下にドットを表示することができれば、それっぽいカルーセルは完成ですね。
……。
ドラッグできるように、手を加えようと思ったら、かなり苦戦して数日たってしまいました……。
滑らかに移動するカルーセル（ドラッグで）
ドラッグで滑らかに移動するカルーセルを作りました。
See the Pen carousel_07 by MATSUDAI (@matsudai) on CodePen.
一応、それっぽいものはできたのですが、コードが“美しく”ないかもしれません……。
いや、プロに見ていただいたら間違いなく“汚い”と怒られるでしょう……。
このドラッグ操作を実装するのに苦戦しすぎて、
本来の実現したいカルーセルのデザインを見失ってしまいましたが、軌道修正……。
あと必要なのは、「タイトル」と「説明」と「ドット」があればあるカルーセルとしては見られるようになる気がしますね。
しかし JavaScript だけのカルーセルをここまで作ってみて、
今のスキルでは、理想を実現するのは無理だなと判断し、
とりあえず、JavaScript のライブラリである Swiper というものを利用してみることにしました。
JavaScript だけのカルーセルはまた改めて、もう少しスキルアップしてから挑戦してみたいと思います。
Swiper でカルーセルを作ってみた
JavaScript だけのカルーセルは一旦あきらめて、
JavaScript のライブラリを活用して理想のカルーセルを作れないか試してみました。
今回利用してみたのは、有名な「Swiper」という JavaScript ライブラリです。
結論からいうと、それっぽいデザインのカルーセルは作ることができました。
↓
が、
レスポンシブにできず、CodePen に収まりきらず、、gif アニメーションだけ載せておきます。
ライブラリを利用することで、簡単に高度な機能を実装することができるのですが、生半可な知識だと細かい部分をいじれないので、コードがめちゃくちゃになってしまいました。
特に、根本的に解決できなかったこととして、以下の２点があります。
・メイン（active）の画像のwidthを広げると、ループの際にtranslateXがズレる
・メイン（active）の画像をtransform: scale(◯);で拡大するとtranslateXはズレないけど、拡大した分のマージンは広がらない
特に上の問題点がどうしても解決できず、最終的に wrapper をひと枠作って、
ズレてる分を移動させて無理やり相さいさせてそれっぽく見せています。
また、すでに問題点でも触れたように、
「Swiper」の画像切り替えの考え方は、
どうやらtransform: translateX( ◯◯);でずらして実現しているようです。（たぶん。）
まとめ
為せば成る
が、“枠内”に収まるデザインで作り始めるのが楽ですね。
今回カルーセルを作るにあたり、素人知識での javascript をいじってみたり、「swiper」という javascript ライブラリを利用してみました。
最初にデザインしたときは、カルーセルがどのようにつくられているのか知らない状態でしたので、思うがままにデザインしてみましたが、実際作っている途中で実現が難しい部分がいくつかあり（私のような素人にとって……。）心がくじけそうになりました。
ただ、どんなデザインでも平面上に書き出せているのですから、あの手この手でやれば絶対に実現できると信じて、何とか見た目だけはそれっぽくすることができました。
最初にデザインするとき、まず、
ライブラリ側で提供されている機能・デザインを把握して、
その範囲内でデザインをするのが、今回のような変な回り道をしなくて済むのかもしれません。
でも私たちは自由にデザインしたいって気持ちを抑えられない生き物だと思いますので、
結局、ちゃんと勉強して、JavaScript だけ使用したモジュールを作れるようになるしかないのかもしれない……。そしてこれができれば、逆にライブラリのコア部分をいじることも可能になる……のでしょうか。
またスキルアップしたころに自作のカルーセルのリベンジができたらと思います。
