このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 カルーセルを作ってみよう (02:11) 無料公開中
- 完成版の確認
- 開発環境の確認
- index.htmlの作成
-
#02 画像を表示する領域を作ろう (02:07) 無料公開中
- 表示領域の作成
- style.cssの作成
- outline
-
#03 画像を配置してみよう (01:48) 無料公開中
- 画像の配置
- リストのスタイリング
-
#04 画像を領域内に収めよう (01:33) 無料公開中
- 画像の大きさ調整
- 親要素の高さ指定
-
#05 画像を横並びにしてみよう (02:28) 無料公開中
- object-fit
- フレックスボックスの指定
- min-width
-
#06 ボタンを配置してみよう (01:57)
- ボタンの配置
- ボタン位置の設定
-
#07 ボタンのスタイルを整えよう (02:26)
- ボタンのスタイリング
- ボタン位置の修正
-
#08 JavaScriptを書く準備をしよう (02:04)
- :hover
- main.jsの作成
-
#09 画像を動かしてみよう (02:21)
- イベントリスナの追加
- transitionの設定
-
#10 画像の幅を取得してみよう (02:00)
- getBoundingClientRect()
- 移動距離の計算
-
#11 画像を移動させる距離を計算しよう (01:47)
- 画像cまでの移動
- currentIndexの導入
-
#12 戻るボタンを動作させよう (01:12)
- イベントリスナの追加
- transitionの設定
-
#13 ボタンの状態を更新しよう (02:20)
- .hidden
- updateButtons()
- クラスの付け替え
-
#14 ボタンの動作を確認しよう (01:18)
- updateButtons() の呼び出し
- 動作確認
-
#15 重複しているコードを関数にまとめよう (01:13)
- moveSlides()
- 動作確認
-
#16 画像下にボタンを配置しよう (02:14)
- buttonの配置
- sectionの配置
-
#17 ボタンを丸くしていこう (02:28)
- buttonのスタイリング
- buttonのコメント化
-
#18 丸いボタンを動的に生成しよう (02:56)
- setupDots()
- 余白の設定
-
#19 クリックイベントを設定しよう (02:11)
- クリックイベントの追加
- currentクラスの移動
-
#20 currentクラスを移動させよう (01:30)
- updateDots()
- 動作確認
-
#21 カルーセルを完成させよう (02:37)
- resizeイベント
- 画像の変更
リリース情報（note）
詳細情報
- 最終更新日
- 2021年7月21日
- バージョン情報
- Chrome 91 / Visual Studio Code 1.58.1
