カルーセル
重要度: 4
矢印をクリックしてスクロールできる画像のリボン「カルーセル」を作成します。
後で、無限スクロール、動的ロードなど、さらに多くの機能を追加できます。
追伸 このタスクでは、HTML/CSS構造が実際にはソリューションの90%を占めています。
画像のリボンは画像のul/liリストとして表すことができます<img>。
通常、そのようなリボンは広いですが、その一部のみが見えるように、「切り取る」ために固定サイズの<div>を周りに置きます
リストを水平に表示させるには、<li>にdisplay: inline-blockなど、正しいCSSプロパティを適用する必要があります。
<img>の場合、既定ではinlineであるため、displayも調整する必要があります。inline要素の下には「レターテール」のための余分なスペースが確保されているので、使用できますdisplay:blockそれを削除します。
スクロールするには<ul>をずらすことができます。margin-leftを変更したり（パフォーマンスが向上）、transform: translateX()の使用など、これを達成するための方法は数多くあります。
外部の<div>には固定幅があるため、「余分」な画像が切り取られます。
全体的なカルーセルは、ページ上の自己完結型の「グラフィックコンポーネント」であるため、<div class="carousel"> 1つにラップし、内部のスタイルを指定したほうがよいでしょう。