スライダー（カルーセル）

スライダー要素を特定し、変数に格納します。
スライダー要素の子要素の画像一覧も変数に格納します。
childrenで取得した値はそのままでは反復処理ができないため、Array.from()で配列に変換します。

アニメーションの準備をします。
div要素を作り、スライダー要素の中に配置します。
画像一覧はこのdiv要素の中に移動します。

スライドアニメーションは１枚目の画像を基準に行います。
１枚目の画像を親コンテナの横幅いっぱいにした後、縦・横のサイズを取得して変数に格納します。

各要素にスタイルを当てていきます。
スタイル設定はわかりやすいようにsetupStylesというオブジェクトにまとめておきます。
１枚目の画像を基準にサイズを設定する汎用関数_setImageSizeWithFirstImageを定義しています。
これを利用しながら各画像や親div要素のサイズを設定していきます。
innerDivには横並びにするスタイルとアニメーションスタイルを当てています。

スライダーの設定をします。
スライダー設定はわかりやすいようにsetupSliderというオブジェクトにまとめておきます。
現在の表示位置を保持するプロパティ_currentIndex、それを利用して次の表示位置を決める関数_next、さらに一定間隔で表示位置をずらしていく関数slideを定義しています。

setupStylesとsetupSliderに用意した実行関数runを呼べば完了です。