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

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

ただいまの
回答率

90.84%

  • JavaScript

    14288questions

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

アマゾンにあるイメージスライダーの実装の考え方について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 75

fjaiofjawiefjaw

score 144

添付させて頂きました動画は
アマゾンのイメージスライダーです。
https://www.youtube.com/watch?v=L_7VHoatO4E&feature=youtu.be

画像の下に表示されるバーをドラッグすることにより
画像をスライドさせているのですが、回答者様でしたら
どのように実装されますでしょうか。
実際のコードではなく、考え方のみで構いませんので、
ご教授頂けますと幸いです。

一応、私なりに作成してみました。
https://jsfiddle.net/ghost7492/q8u4jg3c/

私は、バー要素に対してhtml5のdraggableを指定し、
ドラッグ開始時に開始点となるx座標を保存。
ドラッグ中は、マウスの移動距離と上で求めたx座標を用いて
移動距離を算出。それを要素のstyleのpositionに適用。
バーと画像をスライドさせております。
基本的な考え方は、このような形で大丈夫でしょうか。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/05/02 06:23 編集

    外部サービスを利用してコードを載せられる場合は、念のため質問本文にも添付してください(文字数の関係もあるので可能な限りで結構です)何かでその外部サービスが利用できなくなったときにコードが確認できなくなるためです。ご面倒かと思いますが、よろしくお願いします。

    キャンセル

  • fjaiofjawiefjaw

    2018/05/02 17:04

    確かにおっしゃる通りです。諸事情により、後で修正いたします。

    キャンセル

回答 1

check解決した方法

0

もし、先輩に質問をし、無視をされた場合、
先輩の興味のない質問だったと推測できます。

この質問内容に特に問題がなかったと推測できます。
よって、問題なしとみなし、自己解決といたします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    unityでのムービーについて

    unityでゲーム中にムービーを表示させたいのですが、なかなかいい方法が思いつきません 表示の仕方、それは、薄型テレビに映像を流すようなものとでも思ってください。 映像

  • 解決済

    create.jsでドラッグアンドドロップ・描画を行いたいです

    前提・実現したいこと create.jsを使ってCANVAS内でお絵かき・ドラッグアンドドロップできる様にしたいです。 js初心者で恐縮ですが、もう一週間程手が詰まっておりまし

  • 解決済

    Unity シーソー的な

    Unityで以下の画像のようなものを作成したいです 細長いCubeオブジェクトの左寄りに軸の座標があり オブジェクト自体はその軸の座標で固定されていて落ちない オブジェク

  • 解決済

    magnific popuoを使いページが表示されたと同時にPOPUP(youtube動画)を展開さ...

    前提・実現したいこと magnific popupを使い、ページが表示されたと同時にiframe(youtube動画)を展開させたいです。 発生している問題・エラーメッセー

  • 受付中

    unityがクラッシュしまくる(泣)

    題名のとうり、unityがクラッシュしまくります。 先日,MacBook AirからMacBook Proに買い換えて、データを移行したばっかでした。 特にクラッシュする条件は

  • 解決済

    キャラクターにアニメーションを付けたい

    MMDのモデルを変換してUnityで使えるようにしました しかしうまくアニメーションを付けることができません。(キャラのアニメーションデータはあります) 上下左右を押すと歩

  • 解決済

    Oracle Master Silver 12Cの勉強法

    いつもお世話になっております。 今回Oracle Bronze 12Cを取得しまして、次にOracle Silver 12Cを取ろうと思っています。 しかしSilver 1

  • 解決済

    Unity-ワイヤーアクションの実装

    unityで3Dゲームを作成しています。 プレイヤーからオブジェクトに向けてワイヤーを飛ばし、着弾点を基準にワイヤーを縮め、プレイヤーをオブジェクトに引きつける、 たとえるなら進撃

同じタグがついた質問を見る

  • JavaScript

    14288questions

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