質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

1259閲覧

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

shiiin

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/01/07 09:30

編集2022/01/12 10:55

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

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

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

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

【 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 の要素は何か異なった位置取得方法になりますでしょうか?
何卒よろしくお願いもうしあげます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

こんばんは。

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

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

js

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

投稿2021/01/08 09:59

Lhankor_Mhy

総合スコア35867

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shiiin

2021/01/08 12:41

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

2021/01/09 01:04 編集

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

2021/01/09 12:58

ご返信いただきありがとうございました。 合点がいきました。 なんども失礼いたしました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問