やってみよう画像を左右にスワイプするか、下の点を押してみてください
表示・レイアウトメジャー（よく見る）
カルーセル
Carousel
横にスワイプして画像をめくる。下の点々（ドット）で今何枚目かわかる。
別名スライダースライドショーページャーページインジケーター（下のドット）
どこで使われている？
- よく見かける場所
- ネット通販のトップ、ニュースサイトのバナー、App Storeの画面写真
- 使うとよい場面
- 同じ大きさの写真やおすすめを、場所を取らずに何枚か見せたいとき
- 避けたい場面
- 大事な情報（2枚目以降はほとんど見られない）、自動で速く切り替わるもの
補足下に並ぶ点々は「ページインジケーター」（iOS では Page Control）と呼びます。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「カルーセル（Carousel）」を実装してください。 動き：複数の画像やカードを横に並べ、左右スワイプで1枚ずつ切り替える。下部に現在位置を示すドット（ページインジケーター）を表示する。 使う部品：Carousel（例：Embla Carousel / Swiper）+ ドット
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | Carousel（例：Embla Carousel / Swiper）+ ドット |
|---|---|
| iPhoneアプリなら | TabView + .tabViewStyle(.page) |
| Androidアプリなら | HorizontalPager（Material 3 なら HorizontalMultiBrowseCarousel） |
| Flutterなら | PageView（ドットは smooth_page_indicator） |
| React Nativeなら | FlatList horizontal + pagingEnabled |