JavaScript で検索した結果 - プログラミングならドットインストール

クリックしたときに、「+」マークと内容の表示がアニメーションするようにしていきます。

ひとつの項目を開くと他の項目が閉じられるように実装していきます。

完成版を確認したのち、開発環境について確認していきます。

カルーセルで画像を表示するための領域を作ったのち、スタイリングをしていきます。

リストのタグを使ってカルーセルで使う画像を配置していきます。

画像がカルーセルの領域に収まるように修正していきます。

object-fitプロパティを使って画像の縦横比が保たれるようにしていきます。

画像をスライドさせるためのボタンを配置していきます。

ボタンの見た目を整えたのち、画像の領域に対してボタンを上下中央揃えにしていきます。

ボタンをクリックしたら次の画像にスライドするようにイベントを設定していきます。

ドットインストール - 3分動画でマスターできるプログラミング学習サービス