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

質問

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

※実装したいイメージ

①ページ内にモーダルウィンドウを制御するボタンを複数用意
↓
②任意のボタンを選択
↓
③指定したメインスライドとサムネイルがアクティブ表示される（例：②で2番目のボタンを選択したら、③では2つ目のメインスライドとそのサムネイルがアクティブで表示される）
④閉じるボタンもしくは、モーダルウィンドウコンテンツ外のエリアを選択するとモーダルウィンドウが閉じる

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

試したこと

・調査（インターネット検索）
・実装

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

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

##実装中のコード

<!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> $(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> </div> </body> </html>

行動規範の内容に同意します

回答1件

ベストアンサー

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>スライド１の見出し.</p>
51            <p>スライド１の説明テキストが入ります.</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(); //モーダル表示の１回目だけ実施
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レイアウト設定（終）====*/