こんにちは、ユアサです。
前回はJSのclassListプロパティについて紹介し、クリックしてONとOFFの表示を切り替えるボタンを作りました。予告していた通り、今回はこのプロパティを使って簡単なカルーセルのようなものを作成します。
前回の記事はこちらです。
tech.arms-soft.co.jp
classListプロパティを使った簡単なカルーセル
早速作成しました。
See the Pen カルーセル_classList by felly (@felly00505) on CodePen.
あらかじめtransform:translateY('-100vh');が設定された.is-downクラスを準備しておき、JS側で上矢印の領域がクリックされた際にはis-downクラスをremove、下矢印の領域がクリックされた際にはis-downクラスをaddされ、カルーセルのような動作をするものができました。
一応classListプロパティを使って作成できましたが、コードをご覧の通りitemクラスが付与されているものがitem01とitem02の2つだけなので問題なく動作しているように見えますが、ただis-downクラスを追加・削除するだけの機能になっているので、仮にitem3のように要素が増えた際にis-downクラスがitem2以降追加できなくなってしまう（ただtransform:translateY('-100vh');が同じ値で上書きされるだけの動作になってしまう）のでとても実用的なものとは言えません。
作成して初めて気がつきましたが、カルーセルを作成する際にclassListプロパティを使うのはあまり向いていないようですね・・・。
より実用的なカルーセルを作ってみる
classListプロパティから話が逸れてしまいますが、自分で色々調べてみて、JSでCSSのstyleを変更することが可能であることが分かりました。
classListプロパティを使用したカルーセルではitemクラスに対してtransform:translateY('-100vh');を追加・削除するといった内容でしたが、次はその親要素であるitemsクラスのtranslateYの値が変更されていく、といったものを作成します。
See the Pen JS Carousel by felly (@felly00505) on CodePen.
だいぶ改造しました。変数positionYを設定し、上矢印・下矢印の領域をクリックする度に数値が増減し、itemsクラスにtranslateYの値として追加・更新されるといった内容になります。また変数countも設定して上矢印・下矢印がクリックされる度に増加・減少し、itemクラスが付与されている一番最初・一番最後の要素を超えてカルーセルが動作しないようにif文で制御するようにしました。
これによって、itemクラスが付与されている要素がいくつ増えてもしっかりカルーセルとして動作できるようになりました。
まとめ
今回は前回に引き続きclassListプロパティを使ったカルーセルを作成し、その後要素がいくつ増えても動作できるようなより実用的なカルーセルへ改造しました。
最後は結局classListプロパティを使わない形になってしまいましたが、ブログを書いていてJSのプロパティの中でも向いている機能、向いていない機能というのがあることが分かったので色々勉強になりました。
今回も最後まで読んでいただきありがとうございました（^人^）
