モーダルにサムネイル連動のスライドショーを作成するには、どうしたらいいのでしょうか？

実現したいスライドショーは、モーダルが出現したあと、左右矢印をクリックすると次のサムネイル画像がメイン画像に切り替わり、選択中のサムネイルにactive要素が加えられるというものです。

現状はモーダル内のスライドショーの実現、サムネイルとの連動ができておりませんので教えていただけると助かります。

よろしくお願いいたします。

以下、作成したコードになります。

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Thumbnail01</title>
8  <!-- reset.css destyle -->
9  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
10  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
11  <script type="text/javascript" src="imageSwitching.js"></script>
12  <script>
13    var pics_src = new Array("pics/1.jpg", "pics/2.jpg", "pics/3.jpg");
14    var num = 0;
15    function go_forward() {
16      if (num == 2) {
17        num = 0;
18      }
19      else {
20        num++;
21      }
22      document.getElementById("mypic").src = pics_src[num];
23    }
24    function go_back() {
25      if (num == 0) {
26        num = 2;
27      }
28      else {
29        num--;
30      }
31      document.getElementById("mypic").src = pics_src[num];
32    }
33  </script>
34</head>
35
36<body>
37  <div class="r3_image">
38    <div class="main">
39      <img class="main_photo" src="img/300.jpg" alt="main" width="100%" height="600" />
40    </div>
41    <div class="sub">
42      <div class="sub_thumb">
43        <img class="sub_thumb_photo" src="img/300.jpg" alt="sub" width="112"
44          height="112" />
45      </div>
46      <div class="sub_thumb">
47        <img class="sub_thumb_photo" src="img//300.jpg" alt="sub" width="112"
48          height="112" />
49      </div>
50      <div class="sub_thumb">
51        <img class="sub_thumb_photo" src="img//300.jpg" alt="sub" width="112"
52          height="112" />
53      </div>
54      <div class="sub_thumb">
55        <img class="sub_thumb_photo" src="img//300.jpg" alt="sub" width="112"
56          height="112" />
57      </div>
58      <div class="sub_thumb">
59        <img class="sub_thumb_photo" src="img//300.jpg" alt="sub" width="112"
60          height="112" />
61      </div>
62      <div class="sub_thumb">
63        <img class="sub_thumb_photo" src="img//300.jpg" alt="sub" width="112"
64          height="112" />
65      </div>
66      <div class="sub_thumb">
67        <img class="sub_thumb_photo" src="img//300.jpg" alt="sub" width="112"
68          height="112" />
69      </div>
70      <div class="sub_thumb">
71        <img class="sub_thumb_photo" src="img//300.jpg" alt="sub" width="112"
72          height="112" />
73      </div>
74      <div class="sub_thumb">
75        <img class="sub_thumb_photo" src="img//300.jpg" alt="sub" width="112"
76          height="112" />
77      </div>
78      <div class="sub_thumb">
79        <img class="sub_thumb_photo" src="img//300.jpg" alt="sub" width="112"
80          height="112" />
81      </div>
82    </div>
83    <div class="r3_modal">
84      <div class="content">
85        <div class="r3_bigimg">
86          <a href="#" class="arrow arrow-left"> </a>
87          <img class="r3_bigimg_photo" id="mypic" src="" alt="">
88          <div class="image_sub">
89            <div class="image_sub_thumb"><img class="image_sub_thumb_photo"
90                src="img/300.jpg" alt="sub" width="" height="" /></div>
91            <div class="image_sub_thumb"><img class="image_sub_thumb_photo"
92                src="img//300.jpg" alt="sub" width="" height="" /></div>
93            <div class="image_sub_thumb"><img class="image_sub_thumb_photo"
94                src="img//300.jpg" alt="sub" width="" height="" /></div>
95            <div class="image_sub_thumb"><img class="image_sub_thumb_photo"
96                src="img//300.jpg" alt="sub" width="" height="" /></div>
97            <div class="image_sub_thumb"><img class="image_sub_thumb_photo"
98                src="img//300.jpg" alt="sub" width="" height="" /></div>
99            <div class="image_sub_thumb"><img class="image_sub_thumb_photo"
100                src="img//300.jpg" alt="sub" width="" height="" /></div>
101            <div class="image_sub_thumb"><img class="image_sub_thumb_photo"
102                src="img//300.jpg" alt="sub" width="" height="" /></div>
103            <div class="image_sub_thumb"><img class="image_sub_thumb_photo"
104                src="img//300.jpg" alt="sub" width="" height="" /></div>
105            <div class="image_sub_thumb"><img class="image_sub_thumb_photo"
106                src="img//300.jpg" alt="sub" width="" height="" /></div>
107            <div class="image_sub_thumb"><img class="image_sub_thumb_photo"
108                src="img//300.jpg" alt="sub" width="" height="" /></div>
109          </div>
110          <a href="#" class="arrow arrow-right"> </a>
111        </div>
112
113        <p class="r3_close-btn"><a href="">✖</a></p>
114      </div>
115    </div>
116  </div>
117</body>
118
119<style>
120  .r3_image {
121    margin: 0 auto;
122    min-width: 340px;
123    width: 100%;
124    max-width: 340px;
125    position: relative;
126    background-color: #fafafa;
127  }
128
129  .main_photo {
130    width: 100%;
131    height: auto;
132    vertical-align: bottom;
133    margin-bottom: 10px;
134  }
135
136  .sub {
137    line-height: 0;
138    height: 240px;
139  }
140
141  .sub_thumb {
142    display: block;
143    float: left;
144    width: 60px;
145    height: 60px;
146    margin: 0px 10px 10px 0px;
147    cursor: pointer;
148  }
149
150  .sub_thumb.active {
151    border: 2px solid #007D36;
152    margin: 0px 10px 10px 0px;
153  }
154
155  .sub_thumb:nth-child(5n) {
156    margin: 0px 0px 10px 0px;
157  }
158
159  .sub_thumb:nth-child(5n).active {
160    border: 2px solid #007D36;
161    margin: 0px -2px 6px 0px;
162  }
163
164
165  .sub_thumb_photo {
166    width: 100%;
167    height: auto;
168    padding: 0;
169    margin: 0；
170  }
171
172  /* r3_modal */
173  .r3_modal {
174    position: fixed;
175    top: 1%;
176    left: 0;
177    right: 0;
178    width: 100%;
179    max-width: 700px;
180    margin: 0 auto;
181    background-color: #fff;
182    border: 1px solid #eee;
183    border-radius: 10px;
184    display: none;
185    box-shadow: 3px 3px 0 0 #cecece;
186    justify-content: center;
187    padding: 2%;
188  }
189
190  .content {
191    display: flex;
192    width: 90%;
193    height: 90vh;
194    justify-content: center;
195    padding: 0;
196    font-size: 0;
197    align-items: stretch;
198  }
199
200  .r3_bigimg {
201    width: 100%;
202    max-width: 300px;
203    margin: 0 20px 0 0;
204  }
205
206  .r3_bigimg img {
207    width: 100%;
208    height: auto;
209    vertical-align: bottom;
210    line-height: 1.0em;
211  }
212
213  .image_sub {
214    margin-top: 10px;
215  }
216
217  .image_sub_thumb {
218    display: block;
219    float: left;
220    width: 52px;
221    height: 52px;
222    margin: 0px 10px 10px 0px;
223    cursor: pointer;
224  }
225
226  .image_sub_thumb_photo {
227    width: 100%;
228    max-width: 60px;
229    height: auto;
230    padding: 0;
231    margin: 0；
232  }
233
234
235  .image_sub_thumb.active {
236    border: 2px solid #007D36;
237  }
238
239  .image_sub_thumb:nth-child(5n) {
240    margin: 0px 0px 10px 0px;
241  }
242
243  .image_sub_thumb:nth-child(5n).active {
244    border: 2px solid #007D36;
245  }
246
247  .arrow {
248    position: relative;
249    top: 0;
250    display: inline-block;
251    padding: 0 0 0 16px;
252    color: #000;
253    vertical-align: middle;
254    text-decoration: none;
255    font-size: 15px;
256  }
257
258  .arrow-left {
259    float: left;
260    top: 207px;
261    left: -20px;
262  }
263
264  .arrow-right {
265    float: right;
266    top: -200px;
267    right: -20px;
268  }
269
270  .arrow::before {
271    position: absolute;
272    top: 0;
273    bottom: 0;
274    left: 0;
275    margin: auto;
276    content: "";
277    vertical-align: middle;
278  }
279
280  .arrow-left::before,
281  .arrow-right::before {
282    left: 0px;
283    top: 0px;
284    width: 15px;
285    height: 15px;
286    opacity: 0.65;
287  }
288
289  .arrow-left::before {
290    margin-left: 28px;
291    border-top: 2px solid #ffffff;
292    border-left: 2px solid #ffffff;
293    -webkit-transform: rotate(315deg);
294    transform: rotate(315deg);
295  }
296
297  .arrow-right::before {
298    margin-left: -28px;
299    border-top: 2px solid #ffffff;
300    border-right: 2px solid #ffffff;
301    -webkit-transform: rotate(45deg);
302    transform: rotate(45deg);
303  }
304
305  .r3_close-btn {
306    color: #333;
307    font-size: 40px;
308    margin: 0;
309  }
310
311  .r3_close-btn a {
312    color: #333;
313    text-decoration: none;
314  }
315</style>
316
317<script>
318  $(function () {
319    $(".sub_thumb").first().addClass("active"); 
320    $('.sub_thumb_photo').click(function () { 
321      image_url = $(this).attr("src"); 
322      $(".main_photo").attr("src", image_url).hide().fadeIn(); 
323      $(".sub_thumb.active").removeClass("active"); 
324      $(this).parent().addClass("active"); 
325    });
326  });
327  $('.main').click(function () {
328    var imgSrc = $(this).children().attr('src');
329    $('.r3_bigimg').children().attr('src', imgSrc);
330    $('.r3_modal').fadeIn().css('display', 'flex');
331    return false
332  });
333  $(function () {
334    $('.image_sub_thumb_photo').click(function () { 
335      image_url = $(this).attr("src"); 
336      $(".r3_bigimg_photo").attr("src", image_url).hide().fadeIn(); 
337      $(".image_sub_thumb.active").removeClass("active"); 
338      $(this).parent().addClass("active"); 
339    });
340  });
341  $(function () {
342    $('.arrow-right::before').click(function () { 
343      console.log("Hello World");
344      thumnail_active = $(".image_sub_thumb").hasClass("active").children().attr("src"); 
345      nextElementSibiling = $(thumbnail_image_url.nextElementSibiling).children().attr("src") 
346      $(".r3_bigimg_photo").attr("src", nextElementSibiling).hide().fadeIn(); 
347      $(".image_sub_thumb.active").removeClass("active");
348      $(this).parent().addClass("active");
349    });
350  });
351  $('.r3_close-btn').click(function () {
352    $('.r3_modal').fadeOut();
353    return false
354  });
355</script>
356</html>
357
358コード