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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

Q&A

解決済

2回答

1350閲覧

【jQuery】添付画像のようなスライダーを実装したいです。

退会済みユーザー

退会済みユーザー

総合スコア0

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/11/13 02:16

編集2018/11/13 02:19

前提・実現したいこと

お世話になっております。
添付画像のようなスライダーを実装したいです。
再現できるプラグインや、他にやり方があればご教示いただければ幸いです。
mv部分は時間ごとに切り替わり、サムネイルかドットの箇所をクリックしても
前後の画像へ切り替わるイメージです。

イメージ説明

試したこと

スライダーのプラグインを色々と探しましたが、イメージに沿うものが見つからず。

ざっくりとした説明で申し訳ありません。
よろしくお願いいたします。

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

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

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

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

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

yambejp

2018/11/13 03:27

mvの細かい仕様を記載ください。切り替わりはアニメーションでおこなうのでしょうか?
退会済みユーザー

退会済みユーザー

2018/11/13 03:39 編集

返信ありがとうございます。切り替えイメージは下記サンプルサイトの「Center Mode」のような動きを想定しております。http://kenwheeler.github.io/slick/ もしくはligのtopスライダーのイメージです。https://liginc.co.jp/ 以上、よろしくお願いいたします。
yambejp

2018/11/13 03:45

画像はすごく横長のものなんですよね?サムネイルはメインの画像にかぶって配置すとして、サムネイル自身は横からひょいっとでてくる感じでしょうか?
退会済みユーザー

退会済みユーザー

2018/11/13 03:51

はい、中心の画像は仮ですが1400px位を想定してます。サムネイルもよこからヒョイッと出てくるイメージで間違いないです。よろしくお願いいたします。
guest

回答2

0

ベストアンサー

調整必要そうですがとりあえず・・・

jQueryおよびUI

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 3<script> 4$(function(){ 5 var speed=2000; 6 var imgs=[ 7 "https://placehold.jp/ff0000/00ffff/600x150.png?text=1", 8 "https://placehold.jp/00ff00/ff00ff/600x150.png?text=2", 9 "https://placehold.jp/0000ff/ffff00/600x150.png?text=3", 10 "https://placehold.jp/ff00ff/00ff00/600x150.png?text=4", 11 "https://placehold.jp/ffff00/ff0000/600x150.png?text=5", 12 ]; 13 var current=0; 14 var prev=current>0?current-1:imgs.length-1; 15 var next=current<imgs.length-1?current+1:0; 16 var sty=[]; 17 $('#wrap').append($('<img>').attr('src',imgs[prev])); 18 $('#wrap').append($('<img>').attr('src',imgs[current])); 19 $('#wrap').append($('<img>').attr('src',imgs[next])); 20 21 $('#wrap img:eq(0)').on('load',function(){ 22 var h=$(this).height(); 23 var w=$(this).width(); 24 sty=[ 25 { 26 "top":h*0.25, 27 "left":-w, 28 "z-index":2, 29 "height":h*0.5, 30 "widtht":w*0.5, 31 "opacity":0, 32 },{ 33 "top":h*0.25, 34 "left":0, 35 "z-index":2, 36 "height":h*0.5, 37 "widtht":w*0.5, 38 "opacity":1, 39 },{ 40 "top":0, 41 "left":w*0.25, 42 "z-index":1, 43 "height":h, 44 "widtht":w, 45 },{ 46 "top":h*0.25, 47 "left":w, 48 "z-index":2, 49 "height":h*0.5, 50 "widtht":w*0.5, 51 "opacity":1, 52 },{ 53 "z-index":1, 54 "top":h*0.25, 55 "left":w*1.25, 56 "z-index":2, 57 "height":h*0.5, 58 "widtht":w*0.5, 59 "opacity":0, 60 } 61 ]; 62 $(this).css(sty[1]); 63 $('#wrap img:eq(1)').css(sty[2]); 64 $('#wrap img:eq(2)').css(sty[3]); 65 }); 66 $(document).on('click','#wrap img:eq(0)',function(){ 67 current=prev; 68 prev=current>0?current-1:imgs.length-1; 69 next=current<imgs.length-1?current+1:0; 70 $('#wrap img:eq(0)').css({"z-index":1}).animate(sty[2],speed); 71 $('#wrap img:eq(1)').css({"z-index":2}).animate(sty[3],speed); 72 $('#wrap img:eq(2)').css({"z-index":1}).animate(sty[4],speed).delay(0).queue(function(){$(this).remove();}); 73 $('#wrap img:eq(0)').before($('<img>').attr('src',imgs[prev]).css(sty[0]).animate(sty[1],speed)); 74 }); 75 $(document).on('click','#wrap img:eq(2)',function(){ 76 current=next; 77 prev=current>0?current-1:imgs.length-1; 78 next=current<imgs.length-1?current+1:0; 79 $('#wrap img:eq(0)').css({"z-index":1}).animate(sty[0],speed).delay(0).queue(function(){$(this).remove();}); 80 $('#wrap img:eq(1)').css({"z-index":2}).animate(sty[1],speed); 81 $('#wrap img:eq(2)').css({"z-index":1}).animate(sty[2],speed); 82 $('<img>').attr('src',imgs[next]).css(sty[4]).animate(sty[3],speed).appendTo('#wrap'); 83 }); 84}); 85</script> 86<style> 87#wrap{position:relative} 88#wrap img{position:absolute;} 89 90</style> 91<div id="wrap"> 92</div>

投稿2018/11/13 05:40

yambejp

総合スコア114583

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

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

退会済みユーザー

退会済みユーザー

2018/11/13 05:53

え、凄すぎます。 ありがとうございます、凄いです。自作できるものなんですね....尊敬します... ちなみにこれに図のようにドットをつけて、何を押さなくても数秒で自動で切り替わる機能をつけるにはどう改良していけば良いでしょうか?よろしくお願いいたします。
yambejp

2018/11/13 06:00 編集

数秒で切り替えは簡単ですが、ドットはつけるとエフェクトが邪魔じゃないですか? (ドットをクリックして画像を切り替える場合)
退会済みユーザー

退会済みユーザー

2018/11/13 06:30

そういえばそうですね、、、、ありがとうございます。プラグインでしかできないと思っていたので、助かりました!
guest

0

「カルーセル」(Carousel)ですかね。
CSSフレームワークで導入されている例
https://materializecss.com/carousel.html

Optionsで要望に近い動きは実現できそうに思います。

投稿2018/11/13 03:56

編集2018/11/13 03:57
m.ts10806

総合スコア80765

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

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

退会済みユーザー

退会済みユーザー

2018/11/13 05:06

ご返信、ありがとうございました。 こちら確認してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問