JavaScriptでVertical Sliderを実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、Vertical Sliderを実装します。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

要素を取得する

画面操作に必要な要素を取得します。

top位置の定義

左側のスライダーのtop位置を定義しましょう。

clickイベントの登録

次は、clickイベントを登録します。

これで、UP/DOWNボタンをクリックした時に、clickイベントが発火するようになりました。

changeSlide関数は、これから実装します。

スライド処理の実装

最後にスライド処理を実装しましょう。

スライドの実装は、CSSのtranslateY関数で実現しています。

現在のスライドの高さを取得して、その高さをスライドのインデックス分乗算した値を渡すことでスライドを切り替えています。

スライドの高さって何?と思われる方は、以下の動画が理解のヒントになるかもしれません。

応用: setIntervalを活用

講義にはなかったのですが、setIntervalを使って2秒おきにスライドさせてみましょう。

かっこいいですね!

おわりに

今日も面白い講義でしたね^^

こんなかっこいいWebページを自分でも作成できるようになりたいです。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す