<script>
    // Inicialmente, apresentar a primeira imagem
    // do slide
    let slideIndex = 1;
    showSlides(slideIndex);

    // Definindo um intervalo para passar o slide
    // sozinho
//    setInterval(() => { plusSlides(1); }, 5000);

    // Obtendo os botões para acionar o passador de slide
    // e adicionando o evento onclick
    let prev = document.getElementById("prev").onclick = () => plusSlides(-1);
    let next = document.getElementById("next").onclick = () => plusSlides(1);

    // Função para passar de uma imagem para a outra
    function plusSlides(n) {
      showSlides(slideIndex += n);
    }


    // Obtendo os botões inferiores para acionar o passador
    // de slide e adicionando o evento onclick
    let indicators = document.getElementsByClassName("indicator");

    for (let i = 0; i < indicators.length; i++) {
      indicators[i].onclick = () => currentSlide(i + 1);
    }

    // Função para passar de uma imagem para a outra
    // não, necessariamente, em ordem
    function currentSlide(n) {
      showSlides(slideIndex = n);
    }


    // Função para passar as imagens
    function showSlides(n) {
      // Obtendo os elementos das imagens e dos botões inferiores
      let slides = document.getElementsByClassName("slide");
      let indicators = document.getElementsByClassName("indicator");

      // Se o número passado como parêmetro for maior
      // que o valor total de imanges, o index vai para
      // a primeira posição
      if (n > slides.length) slideIndex = 1

      // Se o número passado como parêmetro for maior
      // que o valor total de imanges, o index vai para
      // a última posição
      if (n < 1) slideIndex = slides.length

      // Percorrendo todo o html colletion e removendo
      // a visibilidade de todas as imagens e também
      // a característica 'ativa' dos botões inferiores
      for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
        indicators[i].className = indicators[i].className.replace(" active", "");
      }

      // Deixando visivel apenas a imagem atual e
      // seu botão inferior correspondente
      slides[slideIndex - 1].style.display = "block";
      indicators[slideIndex - 1].className += " active";
    }


    // -----------------------------------------------
    let modal = document.getElementById("modal-coming-soon");

    let items = document.getElementsByClassName("show-modal");
    for (let i = 0; i < items.length; i++) {
        items[i].addEventListener("click", (e) => {
          e.preventDefault();
          modal.style.display = "block";
        });
    }

    let span = document.getElementById("close-modal-coming-soon");
    span.onclick = () => modal.style.display = "none";

    window.onclick = (e) => {
      if (e.target == modal) modal.style.display = "none";
    }
  </script>