ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/09/04
NEW
【週刊ドットインストール】 Seoul Startup Hubがおすすめ、レッスン制作・256timesの進捗
860
レッスン
864
質問と回答
0
文字起こし
0
ソースコード
242
件のレッスンと
618
件のレッスン動画が見つかりました。
#04 画像を領域内に収めよう
JavaScriptでカルーセルを作ろう
画像がカルーセルの領域に収まるように修正していきます。
#05 画像を横並びにしてみよう
JavaScriptでカルーセルを作ろう
object-fitプロパティを使って画像の縦横比が保たれるようにしていきます。
#06 ボタンを配置してみよう
JavaScriptでカルーセルを作ろう
画像をスライドさせるためのボタンを配置していきます。
#07 ボタンのスタイルを整えよう
JavaScriptでカルーセルを作ろう
ボタンの見た目を整えたのち、画像の領域に対してボタンを上下中央揃えにしていきます。
#09 画像を動かしてみよう
JavaScriptでカルーセルを作ろう
ボタンをクリックしたら次の画像にスライドするようにイベントを設定していきます。
#10 画像の幅を取得してみよう
JavaScriptでカルーセルを作ろう
画像が1枚分だけ横にスライドするように修正していきます。
#11 画像を移動させる距離を計算しよう
JavaScriptでカルーセルを作ろう
何番目のスライドを表示したいかを変数で管理していきます。
#12 戻るボタンを動作させよう
JavaScriptでカルーセルを作ろう
ボタンをクリックしたら前の画像にスライドするようにイベントを設定していきます。
#13 ボタンの状態を更新しよう
JavaScriptでカルーセルを作ろう
ボタンの状態を更新することで、不具合を直していきます。
#14 ボタンの動作を確認しよう
JavaScriptでカルーセルを作ろう
updateButtons()メソッドを呼び出し、ボタンの状態が更新されるか確認していきます。
前へ
45
46
47
48
49
50
51
52
53
54
55
次へ