Airbnbサイト模写　横スクロール画面のデザイン

リンク内容

↑Airbnbのサイト模写をしています。（HTML,CSS,bootstrap）
「ホスティングで実現する、自分らしいライフスタイル」下にある、
「横スクロールすると、その下の丸印○○が黒色になる（連動している）」というデザインを作りたいです。

どのように連動しているか知りたくて、デベロッパーツールで確認した所、このようなコードでした。
・○○部分

html
1<div aria-label="1 / 2" role="img" class="_r752or">
2 <div class="_njkl4g">
3  <div class="_17x8ej3" style="transform:translateX(0px)">
4   <span class="_1h065ac4"></span>
5   <span class="_1c47qtw"></span>
6  </div>
7 </div>
8</div>

・スクロール部分

html
1<ul class="_1pbg6kyw">
2 <li aria-hidden="false" data-key="explore_host_stories" class="_145ocfuw">
3  <div data-key="explore_host_stories" class="_1yfus1e">
4    <div data-testid="nextChapter-item" class="_jscrb5">
5      <div class="_1pm36nmy">ホスティングで広がる可能性
6      </div>
7      <div class="_1nvi2ut">柔軟な働き方を楽しみながら、ホスティングをとおして、好きなことをもっとするための収入アップや長く続く友情関係にめぐりあう機会を得てみませんか。
8      </div>
9      <div class="_1ffln7x">
10      <a target="_blank" href="#"_gzog035">ホスティングの世界を知ろう</a>
11      </div>
12    </div>
13  </div>
14 </li>
15
16 <li aria-hidden="true" data-key="support_hosts" class="_145ocfuw">
17  <div data-key="support_hosts" class="_1yfus1e">
18   <div data-testid="nextChapter-item" class="_jscrb5">
19    <div class="_1pm36nmy">安心のホスティング
20    </div>
21    <div class="_1nvi2ut">24時間365日対応サポート、頼れるホストコミュニティからツールのカスタム設定、ヒント・実践アドバイスのご提供まで、Airbnbが全力でホストの成功をサポートします。
22    </div>
23    <div class="_1ffln7x">
24     <a target="_blank" href="#" class="_gzog035">Airbnbによるホストのサポート体制</a>
25    </div>
26   </div>
27  </div>
28 </li>
29</ul>

質問があります。
①これはどのような考え方でしょうか。（大まかで大丈夫です、調べます）
②これ以外の考え方などありますでしょうか。

今、スクロールバー無しの横スクロール画面と、丸印ができましたが、連動の仕方が分かりません。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

① overflow-x: scrollではみ出した子要素を横スクロールで表示できるようにし、scrollbar-width: noneでスクロールバーを見えなくし、scroll-snap-type: x mandatoryでスクロール位置のスナップをしていると思います。
スクロールの制御はJavaScriptでしょう。

ドットの方は、クラスを入れ替えてるだけですね。

② スライダーのライブラリを見てみると参考になると思いますが、①の方法と、transform: translateXでスライドさせる方法の2種類が多いのではないかな、と思います。

投稿2021/06/08 13:58