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

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

新規登録して質問してみよう
ただいま回答率
85.50%
スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

Q&A

解決済

1回答

5326閲覧

モーダルウィンドウ + サムネイル付きスライダー を作成したい

ememon1969

総合スコア5

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

0グッド

1クリップ

投稿2020/01/13 11:30

質問

Webページ内にあるボタンを選択したら、指定されたサムネイル付きスライダーがモーダルで表示される(Lightbox)といった表示を実装したいと考えています。

※実装したいイメージ
イメージ説明

①ページ内にモーダルウィンドウを制御するボタンを複数用意

②任意のボタンを選択

③指定したメインスライドとサムネイルがアクティブ表示される(例:②で2番目のボタンを選択したら、③では2つ目のメインスライドとそのサムネイルがアクティブで表示される)
④閉じるボタン もしくは、モーダルウィンドウコンテンツ外のエリアを選択するとモーダルウィンドウが閉じる

モーダルウィンドウ単体、サムネイル付きスライダー単体での実装はremodal.jsやslick.jsなどを使った経験はあるものの、いくら調べても全く分からなかったので質問させていただきました。
現状のjsの知見は、ライブラリベースで何とか構築できる程度です。
恐れ入りますが、どなたかお教えいただけると大変ありがたいです。
よろしくお願いいたします。

試したこと

・調査(インターネット検索)
・実装

検証中で最も実装に近い??ソース

外部でライブラリを読み込んでいます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

##実装中のコード

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Page Title</title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" type="text/css" href="/shared/css/slick/slick.css"> <link rel="stylesheet" type="text/css" href="/shared/css/slick/slick-theme.css"> <style> body { background-color: #333; color: #ccc; text-align: center; } body a, body a:visited { color: #ccc; text-decoration: none; } body a:hover { color: #aaa; } .container { position: relative; margin: 0 auto; height: 40vw; display: flex; justify-content: center; opacity: 0; animation: mainFadeIn 2s forwards 1.8s; } .main-slider { position: relative; width: calc(100vw - 26vw); height: 100%; overflow: hidden; } .main-slider .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .main-slider .slide:target { z-index: 3; animation: show 1.2s; } .main-slider .slide:target:first-of-type { z-index: 3; } .main-slider .slide:target:first-of-type .meta { transform: translateX(-50px); filter: blur(5px); opacity: 0; } .main-slider .slide:target .meta { animation: showMeta 1.2s ease 0.9s forwards; } .main-slider .slide:not(:target):not(:first-of-type) { animation: hide 1.2s ease; } .main-slider .slide:not(:target):not(:first-of-type) .meta { animation: hideMeta 1s ease forwards; } .main-slider .slide:first-of-type { z-index: 1; } .main-slider .slide:first-of-type .meta { transform: translateX(0); filter: blur(0); opacity: 1; } .main-slider .slide .meta { position: absolute; top: calc(50% - 19px); left: 0; padding: 0 40% 0 2.4vw; color: #fff; text-align: left; transform: translateX(-50px); filter: blur(5px); opacity: 0; } .main-slider .slide .meta .title { font-size: 38px; font-weight: 800; } .main-slider .slide .meta .desc { margin-top: 20px; font-size: 15px; } .thumbnail-slider { position: relative; width: 26vw; height: 100%; line-height: 0; overflow-y: auto; } .thumbnail-slider::-webkit-scrollbar { width: 5px; } .thumbnail-slider::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0.28); } .thumbnail-slider::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.44); } .thumbnail-slider .slide { position: relative; height: 20%; overflow: hidden; } .thumbnail-slider .slide:hover figure img { transform: scale(1.1); } .thumbnail-slider .slide figure img { transition: transform 0.5s; } .slide figure { height: 100%; } .slide figure img { position: relative; width: 100%; height: 100%; object-fit: cover; } @keyframes mainFadeIn { to { opacity: 1; } } @keyframes show { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } @keyframes hide { 0% { z-index: 2; } 100% { z-index: 2; } } @keyframes showMeta { 0% { transform: translateX(-50px); filter: blur(5px); opacity: 0; } 100% { transform: translateX(0); filter: blur(0); opacity: 1; } } @keyframes hideMeta { 0% { transform: translateX(0); filter: blur(0); opacity: 1; } 100% { transform: translateX(-50px); filter: blur(5px); opacity: 0; } } /*modal*/ .content{ margin: 0 auto; padding: 40px; } .modal{ display: none; height: 100vh; position: fixed; top: 0; width: 100%; } .modal__bg{ background: rgba(0,0,0,0.8); height: 100vh; position: absolute; width: 100%; } .modal__content{ background: #fff; left: 50%; padding: 40px; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 60%; } /*add css*/ .text-slider { display: flex; } .text-slider li { padding-left: 20px; list-style: none; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- <script type="text/javascript" src="/shared/js/slick.min.js"></script> --> <script> $(function(){ $('.js-modal-open').on('click',function(){ $('.js-modal').fadeIn(); return false; }); $('.js-modal-close').on('click',function(){ $('.js-modal').fadeOut(); return false; }); }); </script> </head> <body>
<div class="content"> <ul class="text-slider" id="txt"> <li class="slide"> <a class="js-modal-open" id="thisone1" href="#slide-1">指定スライド1</a> </li> <li class="slide"> <a class="js-modal-open" id="thisone2" href="#slide-2">指定スライド2</a> </li> <li class="slide"> <a class="js-modal-open" id="thisone3" href="#slide-3">指定スライド3</a> </li> <li class="slide"> <a class="js-modal-open" id="thisone4" href="#slide-4">指定スライド4</a> </li> </ul> </div> <div class="modal js-modal"> <div class="modal__bg js-modal-close"></div> <div class="modal__content"> <div class="container"> <ul class="main-slider" id="room"> <li class="slide" id="slide-1"> <figure><img src="https://drive.google.com/uc?export=view&amp;id=1sRjMAeYv2axSKgRPtLHyk7LaHne8K4oq" /></figure> <div class="meta"> <p class="title">Elisa Cannon</p> <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </li> <li class="slide" id="slide-2"> <figure><img src="https://drive.google.com/uc?export=view&amp;id=1Ido1e59DT4GltXbmnTEmfJjkGdLwslZK" /></figure> <div class="meta"> <p class="title">Salvatore Wilson</p> <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </li> <li class="slide" id="slide-3"> <figure><img src="https://drive.google.com/uc?export=view&amp;id=1eGcqYmliPjIdxGXxyk2BrC4-KtOtFXK9" /></figure> <div class="meta"> <p class="title">Suzanne Flowers</p> <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </li> <li class="slide" id="slide-4"> <figure><img src="https://drive.google.com/uc?export=view&amp;id=1p7Akjvwh-yMhErDMvDFKb7YxpERMMXtX" /></figure> <div class="meta"> <p class="title">Evelyn Sanchez</p> <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </li> </ul> <nav role="navigation"> <ul class="thumbnail-slider" id="thmb"> <li class="slide"> <a href="#slide-1"> <figure><img src="https://drive.google.com/uc?export=view&amp;id=1sRjMAeYv2axSKgRPtLHyk7LaHne8K4oq" /></figure> </a> </li> <li class="slide"> <a href="#slide-2"> <figure><img src="https://drive.google.com/uc?export=view&amp;id=1Ido1e59DT4GltXbmnTEmfJjkGdLwslZK" /></figure> </a> </li> <li class="slide"> <a href="#slide-3"> <figure><img src="https://drive.google.com/uc?export=view&amp;id=1eGcqYmliPjIdxGXxyk2BrC4-KtOtFXK9" /></figure> </a> </li> <li class="slide"> <a href="#slide-4"> <figure><img src="https://drive.google.com/uc?export=view&amp;id=1p7Akjvwh-yMhErDMvDFKb7YxpERMMXtX" /></figure> </a> </li> </ul> </nav> </div> <a class="js-modal-close" href="">閉じる</a>
</div><!--modal__inner--> </div><!--modal--> </body> </html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

slick.jsを使って、作ってみみました。

slick.jsを以下からダウンロードして、パスを設定してもらえば、動くかと思います。
(以下のページのget it nowタブを押せば、ダウンロードリンクまで飛びます)
http://kenwheeler.github.io/slick/
ダウンロードしたフォルダ内の

  • slick-theme.css
  • slick.css
  • slick.min.js

を使います。
あと、fontsフォルダを上記3つのファイルと同階層に入れてください。
あとは、imgタグに画像を設定してもらえば、動くと思います。

chromeとfirefoxでは正常に動いたので、いいと思いますが。

イメージ
イメージ説明

html

1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>Page Title</title> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 10 <!-- スクリプトの読込順は重要 --> 11 <link href="slick/slick-theme.css" rel="stylesheet" type="text/css"> 12 <link href="slick/slick.css" rel="stylesheet" type="text/css"> 13 <link rel="stylesheet" type="text/css" href="style.css"> 14 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 15 <script type="text/javascript" src="slick/slick.min.js"></script> 16 17</head> 18 19<body> 20 <!-- メイン画面 --> 21 <div class="navigation"> 22 <li class="slide"> 23 <span>指定スライド1</span> 24 </li> 25 <li class="slide"> 26 <span>指定スライド2</span> 27 </li> 28 <li class="slide"> 29 <span>指定スライド3</span> 30 </li> 31 <li class="slide"> 32 <span>指定スライド4</span> 33 </li> 34 </div> 35 <div class="contents"> 36 <h1>WEBコンテンツ</h1> 37 </div> 38 <!-- メイン画面(終) --> 39 40 <!-- モーダルウィンドウ --> 41 <div class="modal-window" hidden><!--初期画面は非表示--> 42 <div class="close-btn">×</div> 43 <div class="wrapper"> 44 <ul class="slider"> 45 <li><a href="#"><img src="images/01.jpg" alt="image01"></a></li> 46 <li><a href="#"><img src="images/02.jpg" alt="image02"></a></li> 47 <li><a href="#"><img src="images/03.jpg" alt="image03"></a></li> 48 <li><a href="#"><img src="images/04.jpg" alt="image04"></a></li> 49 </ul> 50 <p>スライド1の見出し.</p> 51 <p>スライド1の説明テキストが入ります.</p> 52 <div class="thmb-wrapper"> 53 <ul class="thumb"> 54 <li><img src="images/01.jpg" alt="image01"></li> 55 <li><img src="images/02.jpg" alt="image02"></li> 56 <li><img src="images/03.jpg" alt="image03"></li> 57 <li><img src="images/04.jpg" alt="image04"></li> 58 </ul> 59 </div> 60 </div> 61 </div> 62 <!-- モーダルウィンドウ(終)--> 63</body> 64</html> 65 66 67<script> 68 var flag = false; //モーダル表示1回目か判断するフラグ 69 70 //====slick.jsの設定==== 71 function slick_setting(){ 72 $('.slider').slick({ 73 arrows:true, //メイン画像の矢印表示 74 }); 75 $('.thumb').slick({ 76 arrows:false, //サムネの矢印非表示 77 slidesToShow:4, //スライドの枚数 78 draggable:false, //ドラッグ切替無効 79 }); 80 } 81 82 //====メイン画面のクリック設定==== 83 $('.navigation li').click(function() { 84 var index = $(this).index(); //クリックされた画像番号 85 $('.modal-window').show(); //モーダル表示 86 if(flag==false){ 87 slick_setting(); //モーダル表示の1回目だけ実施 88 flag=true; 89 } 90 var index = $(this).index(); //クリックされた画像番号 91 $('.slider').slick('slickGoTo', index);//メイン画像の切替 92 $(".thumb li img").css({border: '3px solid transparent',}); //サムネの囲い線を透明にする 93 $(".thumb li img").eq(index).css({border: '3px solid red',}); //表示されている画像サムネの囲い線に色をつける 94 }); 95 96 //====閉じるボタンの設定==== 97 $('.close-btn').click(function() { 98 $('.modal-window').hide(); 99 }); 100 101 //====サムネのクリック設定==== 102 $('.thumb li').click(function() { 103 var index = $(this).index(); //クリックされた画像番号 104 $('.slider').slick('slickGoTo', index); //メイン画像の切替 105 $(".thumb li img").css({border: '3px solid transparent',}); //サムネの囲い線を透明にする 106 $(".thumb li img").eq(index).css({border: '3px solid red',}); //表示されている画像サムネの囲い線に色をつける 107 }); 108 109 //====next,prevボタンのクリック設定==== 110 $('.slider').on('beforeChange', function(slick, currentSlide, beforeSlide, afterSlide,){ 111 $(".thumb li img").css({border: '3px solid transparent',}); //サムネの囲い線を透明にする 112 $(".thumb li img").eq(afterSlide).css({border: '3px solid red',}); //表示されている画像サムネの囲い線に色をつける 113 }); 114 115 //====wrapperの外側がクリックされた時==== 116 $('.modal-window').click(function(event) { 117 if(!$(event.target).closest('.wrapper').length) { 118 $('.modal-window').hide(); 119 } 120 }); 121</script>

css

1/*style.css*/ 2 3body { 4 text-align: center; 5 box-sizing: border-box; 6 margin: 0; 7 padding:0; 8} 9 10/*メイン画面*/ 11.navigation{ 12 margin-top: 100px; 13} 14.navigation li{ 15 display: inline; 16 border: 1px solid black; 17 padding: 5px; 18 cursor: pointer; 19 cursor: hand; 20} 21.navigation li:hover{ 22 background-color: darkgray; 23} 24.contents{ 25 width: 80%; 26 padding: 200px 50px; 27 border: 1px solid black; 28 margin: 20px auto; 29} 30/*メイン画面(終)*/ 31 32/*モーダルウィンドウ*/ 33.modal-window{ 34 position: absolute; 35 top: 0; 36 left: 0; 37 width: 100%; 38 height: 100%; 39 background-color: pink; 40 background-color: rgba(0, 0, 0, 0.7); 41 color: white; 42 /*border: 1px solid red;*/ 43} 44.close-btn{ 45 position: absolute; 46 top: 10px; 47 right: 20px; 48 color: white; 49 font-size: 30px; 50 cursor: pointer; 51 cursor: hand; 52} 53/*モーダルウィンドウ(終)*/ 54 55/*====slickレイアウト設定====*/ 56ul { 57 padding-inline-start: 0px; 58 list-style-type: disc; 59 margin-block-start: 0px; 60 margin-block-end: 0px; 61 margin-inline-start: 0px; 62 margin-inline-end: 0px; 63} 64 65 66.wrapper{ 67 position: absolute; 68 top:50%; 69 left: 50%; 70 transform: translate(-50%,-50%); 71 width: 70%; 72 height: 80%; 73 border: 1px solid white; 74 padding: 0; 75 padding-top: 50px; 76 background-color: rgba(0,0,0,0.4) 77} 78.slider{ 79 margin: 0px auto; 80 width: 60%; 81 border: 1px solid red; 82} 83.slider img{ 84 height: 100%; 85 width: 100%; 86} 87.slick-prev:before, 88.slick-next:before { 89 color: white; 90} 91.thumb{ 92 width: 30%; 93 margin: 0 auto; 94} 95 96.thumb li{ 97 margin-right: 10px; 98} 99.thumb img{ 100 width: 100%; 101 height: auto; 102 cursor: pointer; 103 cursor: hand; 104} 105.slider{ 106 margin-bottom: 20px; 107} 108/*====slickレイアウト設定(終)====*/

以上

投稿2020/01/14 06:30

KazuSaka

総合スコア640

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問