スライドショーの実装とoffset()

Question

◯下記URLの上部スライドショーを実装をしたいです。
◯offset()の正しい使い方をご教示いただきたいです。

お世話になっておリます。airbnb様の模写を行なっておりまして、上記のスライドショーで質問させていただきたい所存です。

URL　：　https://www.airbnb.jp/host/homes

ページ上部の人物が写っているスライドショーですが、なかなかうまく実装できません。一枚一枚のものであれば理解しているのですが、スクロールで任意の位置に行けて、かつ、ボタン操作も絡んできていて全く頭が動きません。
また、offset().left が常に０になってしまいます。

【　JS　】
$(function(){
$(window).on('load',(function(){

    $container = $(".fv-slide");
    $slides = $(".fv-slideshow");
    $base = $(".Darrel");
    $left = $(".left");
    $right = $(".right");
    $edge = $base.offset().left;

$container.on('scroll',function(){
    console.log($edge);
})

$right.on('click',function(){
   $scroll = $container.scrollLeft();

    if($edge===545.296875){
      $slides.animate({left:-360+'px'});
    }else{
       $slides.animate({left:-$scroll-360+'px'});
   }
})

}))
});

【　HTML (ヘッダー以降から該当箇所まで)】

</header> <main> <section class="fv"> <div class="inner"> <div class="fv-fix"> <h1><span>Airbnb</span>にお部屋を掲載しよう</h1> <p>活気に満ちたホストコミュニティに参加し、記憶に残るとっておきの滞在を旅行者に提供しながら、好きなことを追求するための収入を得ましょう。</p> <button class="start-button">はじめる</button> </div> <div class="fv-slide"> <div class="fv-slideshow"> <div class="fv-slideshow_slides Darrel"> <p><img src="https://a0.muscache.com/im/pictures/92acd468-73bf-4ca1-a956-277c4a94b3a3.jpg?im_q=highq&im_w=960" alt=""></p> <h2>Darrelさん</h2> <p>アトランタでタイニーハウスをホスティング<br> <a href="#">タイニーハウスをチェック</a></p> </div> <div class="fv-slideshow_slides" class="Candida"> <p><img src="https://a0.muscache.com/im/pictures/8a09fe60-64e5-4461-bb80-aaf8bc3238a7.jpg?im_q=highq&im_w=960" alt=""></p> <h2>Candidaさん＆Jeffさん</h2> <p>ジョシュア・ツリーで一軒家をホスティング<br> <a href="#">一軒家をチェック</a></p> </div> <div class="fv-slideshow_slides" class="ryo"> <p><img src="img/ryo.jpg" alt=""></p> <h2>Ryoさん</h2> <p>小松でファームステイをホスティング<br> <a href="#">ファームステイをチェック</a></p> </div> <div class="fv-slideshow_slides" class="sophie"> <p><img src="https://a0.muscache.com/im/pictures/17d27522-7f79-4a82-9225-74c737800641.jpg?im_q=highq&im_w=960" alt=""></p> <h2>Sophieさん</h2> <p>パリでロフトをホスティング<br> <a href="#">ロフトをチェック</a></p> </div> <div class="fv-slideshow_slides" class="nancy"> <p><img src="img/nancy.jpg" alt=""></p> <h2>Nancyさん</h2> <p>サンフランシスコで個室をホスティング<br> <a href="#">個室をチェック</a></p> </div> </div> </div> <p class="arrow left">&lt;</p> <p class="arrow right">&gt;</p> </div> </section>

【　　CSS 】

.fv .fv-slide{
overflow-x: scroll;
position:relative;
width:66vw;
}

.fv-slide::-webkit-scrollbar {
display:none;
}

.fv .fv-slideshow {
position:absolute;
top:40px;
left:0;
display:flex;
overflow: hidden;
padding-bottom: 20px;
}

.fv .fv-slideshow_slides{
margin-right:20px;
}

.fv .fv-slideshow_slides:not(:nth-of-type(1)){
margin-left:20px;
}

.fv .fv-slideshow_slides h2 {
font-size:1.38em;
margin:15px 0 10px 0;
}

.fv .fv-slideshow_slides img{
width:320px;
height:424px;
object-fit:cover;
border-radius:10px;
display:inline-block;
margin:10px 0;
}

.fv .fv-slideshow_slides p a{
color:#000;
display:inline-block;
margin-top:16px;
font-size:0.8em;
font-weight:600;
}

.fv .arrow {
position:absolute;
bottom:38px;
display:inline-block;
font-size:1.2em;
color:#333;
padding:5px 11px 7px;
border-radius:50%;
box-shadow:2px 2px 2px rgb(231, 230, 230);
z-index:10;
border:0.1em solid rgb(231, 230, 230);
cursor:pointer;
}

.fv .arrow.right{
right:50px;
}

.fv .arrow.left{
right:95px;
}

念の為、offset()ではなくposition()も試したのですが、こちらも常に0になってしまいます。
position:absolute の要素は何か異なった位置取得方法になりますでしょうか？
何卒よろしくお願いもうしあげます。

Answer 1

こんばんは。

offset().left が常に０になってしまいます

大抵の場合、この手のメソッドの戻り値は「ライブ」ではありません。
以下のように変更してみるとよくわかるのではないでしょうか。

$container.on('scroll',function(){
console.log($edge,$base.offset().left);
})

Comments

[shiiin]

Lhankor_Mhy様

お世話になります。ご回答いただきまして誠にありがとうございました。ご指摘いただいた通り行いましたら、二個目のパラメータで出力が確認ができました。
おっしゃられていた「ライブではない」というのは、［変数を介すと値が出ない］という解釈でよろしいでしょうか？

[Lhankor_Mhy]

この手のメソッドの戻り値は「取得したタイミングの値」であって、スクロールに合わせて「ライブ」で変更されるというものではない、ということです。

別の言葉を使うのであれば「参照戻しではない」ということでしょうか。

[shiiin]

ご返信いただきありがとうございました。
合点がいきました。

なんども失礼いたしました。ありがとうございます。