Pesquisar na Comunidade

Estou precisando colocar em um site um propriedade que toda vez que clicar em uma imagem apareça uma janela modal com um slide show em que você pode passar as imagens. Por exemplo se tiver a foto de um celular quando eu clicar nela aparecera um slide show, onde você pode ir passando e vendo outras imagens do celular. Eu já tentei fazer mais sempre dá erro quando eu coloco várias imagens e tento chamar uma por uma. Não sei se eu preciso chamar cada slide ou se existe uma forma simples de se fazer isso. Vou postar aqui um código que eu fiz: CSS: * { box-sizing:border-box; font-family: Arial; } .slideshow-container { max-width: 800px; position: relative; margin: auto; } .mySlides { display: none; } .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: #4285f4; font-weight: bold; font-size: 28px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } .dot { cursor: pointer; height: 15px; width: 15px; margin: 10px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #4285f4; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } .img_slide{ width: 100%; height: 500px; } /* ----------------MODAL--------------------------------- */ .modal-container{ width: 100vw; height: 100vh; background: rgba(0, 0, 0, .8); position: fixed; top: 0px; left: 0px; z-index: 2000; display: none; justify-content: center; align-items: center; font-family: Arial, Helvetica, sans-serif; } .modal-container.mostrar{ display: flex; } @keyframes modal{ from{ opacity: 0; transform: translate3d(0, -60px, 0); } to{ opacity: 1; transform: translate3d(0, 0, 0); } } .mostrar .modal-content{ animation: modal .3s; } .fechar{ position: absolute; top: 8px; right: 3px; width: 30px; height: 30px; font-weight: bold; color: #4285f4; font-size: 25px; font-family: Arial, Helvetica, sans-serif; cursor: pointer; background: transparent; border: none; } @media (max-width: 600px) { .img_slide{ width: 100%; height: 300px; } } JAVASCRIPT: var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } function iniciaModal(modalID){ const modal = document.getElementById(modalID); if(modal){ modal.classList.add('mostrar'); modal.addEventListener('click',(e)=>{ if(e.target.id == modalID || e.target.className == 'fechar'){ modal.classList.remove('mostrar'); } }); } } const botaoChama = document.querySelector('#botaoChama'); botaoChama.addEventListener('click',()=>{ iniciaModal('modal'); }); const botaoChama2 = document.querySelector('#botaoChama2'); botaoChama2.addEventListener('click',()=>{ iniciaModal('modal2'); }); HTML: <div id="modal" class="modal-container"> <button class="fechar">X</button> <div class="slideshow-container"> <div class="mySlides fade"> <img src = "https://wallpapercave.com/wp/wp3473585.jpg" class="img_slide"> </div> <div class="mySlides fade"> <img src = "https://i.pinimg.com/originals/cd/7b/5c/cd7b5c8d4687b5c98a445127926a56e2.jpg" class="img_slide"> </div> <div class="mySlides fade"> <img src =" https://wallpapercave.com/wp/wp2043649.png " class="img_slide"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </div> </div> <div id="modal2" class="modal-container"> <button class="fechar">X</button> <div class="slideshow-container"> <div class="mySlides fade"> <img src="https://wallpapercave.com/wp/wp9688141.jpg" class="img_slide"> </div> <div class="mySlides fade"> <img src="https://wallpapercave.com/wp/wp8480719.jpg" class="img_slide"> </div> <div class="mySlides fade"> <img src="https://wallpapercave.com/wp/wp9683280.jpg" class="img_slide"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div style="text-align:center"> <span class="dot" onclick="currentSlide(4)"></span> <span class="dot" onclick="currentSlide(5)"></span> <span class="dot" onclick="currentSlide(6)"></span> </div> </div> </div> <button id="botaoChama">Modal</button> <button id="botaoChama2">Modal 2</button>