前提・実現したいこと
お世話になっております。
添付画像のようなスライダーを実装したいです。
再現できるプラグインや、他にやり方があればご教示いただければ幸いです。
mv部分は時間ごとに切り替わり、サムネイルかドットの箇所をクリックしても
前後の画像へ切り替わるイメージです。
試したこと
スライダーのプラグインを色々と探しましたが、イメージに沿うものが見つからず。
ざっくりとした説明で申し訳ありません。
よろしくお願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/11/13 03:39 編集
2018/11/13 03:45
退会済みユーザー
2018/11/13 03:51
回答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
総合スコア114583
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/11/13 05:53
2018/11/13 06:00 編集
退会済みユーザー
2018/11/13 06:30
0
「カルーセル」(Carousel)ですかね。
CSSフレームワークで導入されている例
https://materializecss.com/carousel.html
Optionsで要望に近い動きは実現できそうに思います。
投稿2018/11/13 03:56
編集2018/11/13 03:57総合スコア80765
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/11/13 05:06
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。