スクロール・ボタンのスライダー

Question

お世話になります。

下記URL上部の人物画像によるスライダーはどのような仕組みになっているのでしょうか？

airbnb様　https://www.airbnb.jp/host/homes

ボタンだけであれば押したタイミングでleftの値を変えたりというのは想像つくのですが、、、
スクロールが絡んでくきますとleftで位置を固定する訳にもいかないかと思いました。

どのようにしたら実装ができますでしょうか？

Answer 1

具体的なソースコードがあればアドバイスしやすいのですが、無いので、自分なりの見解をしますね。

自分なら、DOMの長さを取得して操作しますね。
子要素の数を取得する

記事の通り、DOMの長さを取得できるので、別途で今表示してるのが何番目なのかが分かる変数indexを作って置き、右ボタンが押されたらindexを加算、左ボタンが押されたらindexを減算して、indexが要素数を超えるところであれば右ボタンを消すなどの方法で作ります。

Comments

[shiiin]

Nero1129様

ご回答頂きまして誠にありがとうございました。indexの件、組み込んでみて実装できました。誠にありがとうございます。