<!---
/*
 * Copyright (c) 2023 Carlos Romero Martin CRMDevAppIT
 * 
 * File: RL_Sport.html
 * Project: Rolling Lions
 * Created Date: 23/05/2022 - 12:05
 * Author: Carlos Romero Martin
 * -------------------------------------------------------------------------
 * Last Modified: Thu Mar 23 2023
 * Modified By: Carlos Romero Martin
 * -------------------------------------------------------------------------
 * Copyright (c) 2022 - 2023 CRMDevAppIT - Carlos Romero Martin
 * -------------------------------------------------------------------------
 * 
 * Redistribution et utilisation sous formes source et binaire, avec ou sans
 * modification, sont autorisées à condition que les conditions suivantes soient
 * rencontré:
 * 
 * 1. Les redistributions du code source doivent conserver l'avis de droit d'auteur ci-dessus,
 * cette liste de conditions et la clause de non-responsabilité suivante.
 * 
 * 2. Les redistributions sous forme binaire doivent reproduire le droit d'auteur ci-dessus
 * notez, cette liste de conditions et la clause de non-responsabilité suivante dans 
 * la documentation et/ou d'autres matériaux fournis avec la distribution
 * 
 * 3. Ni le nom du titulaire du droit d'auteur ni les noms de ses
 * contributeurs peuvent être utilisés pour approuver ou promouvoir des produits dérivés de ce
 * logiciel sans autorisation écrite préalable spécifique.
 * 
 * CE LOGICIEL EST FOURNI PAR LES TITULAIRES DES DROITS D'AUTEUR ET LES CONTRIBUTEURS COMME 
 * IL EST ET TOUTE GARANTIE EXPRESSE OU IMPLICITE, Y COMPRIS, MAIS SANS S'Y LIMITER
 * AUX GARANTIES IMPLICITES DE QUALITÉ MARCHANDE ET D'ADAPTATION À UN PARTICULIER
 * LES OBJECTIFS SONT EXCLUS. EN AUCUN CAS LE TITULAIRE DU DROIT D'AUTEUR OU
 * DES CONTRIBUTEURS NE SONT RESPONSABLE DE TOUT DIRECT, INDIRECT, ACCESSOIRE, SPÉCIAL, EXEMPLAIRE OU
 * DOMMAGES INDIRECTS (Y COMPRIS, MAIS SANS S'Y LIMITER, L'APPROVISIONNEMENT DE 
 * PRODUIT DE BIENS OU DE SERVICES ; PERTE D'UTILISATION, DE DONNÉES OU DE PROFIT ; OU D'ENTREPRISE
 * INTERRUPTION) TOUTEFOIS CAUSÉE ET SUR TOUTE THÉORIE DE RESPONSABILITÉ, QU'ELLE SOIT
 * CONTRAT, RESPONSABILITÉ STRICTE OU DÉLICTUELLE (Y COMPRIS LA NÉGLIGENCE OU AUTRE)
 * RÉSULTANT DE N'IMPORTE QUELLE FAÇON DE L'UTILISATION DE CE LOGICIEL, MÊME SI AVISÉ DE
 * LA POSSIBILITE DE TELS DOMMAGES.
 * 
 * HISTORY:
 * Date      	By	Comments
 * ----------	---	----------------------------------------------------------
 */

-->
<!--
/*
 * Copyright (c) 2023 Carlos Romero Martin CRMDevAppIT
 * 
 * File: RL_Header.html
 * Project: Rolling Lions
 * Created Date: 23/03/2023 - 10:03
 * Author: Carlos Romero Martin
 * -------------------------------------------------------------------------
 * Last Modified: Thu Mar 23 2023
 * Modified By: Carlos Romero Martin
 * -------------------------------------------------------------------------
 * Copyright (c) 2023 CRMDevAppIT - Carlos Romero Martin
 * -------------------------------------------------------------------------
 * 
 * Redistribution et utilisation sous formes source et binaire, avec ou sans
 * modification, sont autorisées à condition que les conditions suivantes soient
 * rencontré:
 * 
 * 1. Les redistributions du code source doivent conserver l'avis de droit d'auteur ci-dessus,
 * cette liste de conditions et la clause de non-responsabilité suivante.
 * 
 * 2. Les redistributions sous forme binaire doivent reproduire le droit d'auteur ci-dessus
 * notez, cette liste de conditions et la clause de non-responsabilité suivante dans 
 * la documentation et/ou d'autres matériaux fournis avec la distribution
 * 
 * 3. Ni le nom du titulaire du droit d'auteur ni les noms de ses
 * contributeurs peuvent être utilisés pour approuver ou promouvoir des produits dérivés de ce
 * logiciel sans autorisation écrite préalable spécifique.
 * 
 * CE LOGICIEL EST FOURNI PAR LES TITULAIRES DES DROITS D'AUTEUR ET LES CONTRIBUTEURS COMME 
 * IL EST ET TOUTE GARANTIE EXPRESSE OU IMPLICITE, Y COMPRIS, MAIS SANS S'Y LIMITER
 * AUX GARANTIES IMPLICITES DE QUALITÉ MARCHANDE ET D'ADAPTATION À UN PARTICULIER
 * LES OBJECTIFS SONT EXCLUS. EN AUCUN CAS LE TITULAIRE DU DROIT D'AUTEUR OU
 * DES CONTRIBUTEURS NE SONT RESPONSABLE DE TOUT DIRECT, INDIRECT, ACCESSOIRE, SPÉCIAL, EXEMPLAIRE OU
 * DOMMAGES INDIRECTS (Y COMPRIS, MAIS SANS S'Y LIMITER, L'APPROVISIONNEMENT DE 
 * PRODUIT DE BIENS OU DE SERVICES ; PERTE D'UTILISATION, DE DONNÉES OU DE PROFIT ; OU D'ENTREPRISE
 * INTERRUPTION) TOUTEFOIS CAUSÉE ET SUR TOUTE THÉORIE DE RESPONSABILITÉ, QU'ELLE SOIT
 * CONTRAT, RESPONSABILITÉ STRICTE OU DÉLICTUELLE (Y COMPRIS LA NÉGLIGENCE OU AUTRE)
 * RÉSULTANT DE N'IMPORTE QUELLE FAÇON DE L'UTILISATION DE CE LOGICIEL, MÊME SI AVISÉ DE
 * LA POSSIBILITE DE TELS DOMMAGES.
 * 
 * HISTORY:
 * Date      	By	Comments
 * ----------	---	----------------------------------------------------------
 * 10-01-2024	CRM	Ajout Logos loisirs et competition
 * 11-11-2023	CRM	Ajout des langues
 */
--->


<!DOCTYPE html>
<html lang="FR">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author"
          content="Carlos Romero Martin - CRMDevAppIT (c)">
    <style>
          /* Basic navbar styling */
          .navbar {
            display: flex;
            background-color: black;
            overflow: hidden;
          }
      
          .navbar a {
            display: flex;
            float: left;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
          }
      
          .navbar a:hover {
            background-color: #f83535;
            color: black;
          }
      
          /* Responsive navbar */
          @media screen and (max-width: 600px) {
            .navbar a {
              float: none;
              display: block;
              text-align: left;
            }
          }
    </style>
    <style>
          #language-switcher select {
              width: auto;
              background-color: transparent;
              font-size: 28px;
              border: 0px solid;
              /*remove arrow*/
              -webkit-appearance: none;
              -moz-appearance: none;
              text-indent: 1px;
              text-overflow: '';
              /*remove focus border*/
              outline: none;
          }
    </style>      
    <title>Rolling Lions</title>
    

<link href="../static/css/bootstrap.css" rel="stylesheet" />
<link href="../static/css/bootstrap-grid.css" rel="stylesheet" />
<link href="../static/css/bootstrap-reboot.css" rel="stylesheet" />
<link href="../static/css/bootstrap-tabs-x.css" rel="stylesheet" />
<link href="../static/css/fonts.css" rel="stylesheet" />
<link href="../static/css/fontawesome.css" rel="stylesheet" />
<link href="../static/css/bootstrap-table.css" rel="stylesheet" />
<link href="../static/css/viewer.css" rel="stylesheet" />
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

<style type="text/css">
  .tableFixHead {
    overflow-y: auto;
    height: 800px;
  }

  .tableFixHead table {
    border-collapse: collapse;
    width: 100%;
  }

  .tableFixHead th,
  .tableFixHead td {
    padding: 0px 10px;
  }

  .tableFixHead th {
    position: sticky;
    top: 0;
    background: #eee;
  }
</style>
<style type="text/css">
  .tableFixHeadSM {
    overflow-y: auto;
    height: 100px;
  }

  .tableFixHeadSM table {
    border-collapse: collapse;
    width: 100%;
  }

  .tableFixHeadSM th,
  .tableFixHeadSM td {
    padding: 0px 10px;
  }

  .tableFixHeadSM th {
    position: sticky;
    top: 0;
    background: #eee;
  }
</style>
<style type="text/css">
  .tableFixHead3Acc {
    overflow-y: auto;
    height: 800px;
  }

  .tableFixHead3Acc table {
    border-collapse: collapse;
    width: 100%;
  }

  .tableFixHead3Acc th,
  .tableFixHead3Acc td {
    padding: 0px 8px;
  }

  .tableFixHead3Acc th {
    position: sticky;
    top: 0;
    background: #eee;
  }
</style>
<style>
  .vl {
    border-left: 2px solid black;
    height: 20px;
    display: inline;
  }
</style>
<style>
  img {
    max-width: 80%;
  }

  input[type="radio"] {
    position: absolute;
    left: -9999px;
  }

  /*on cache tous les input*/
  .cadre-demo1 label {
    cursor: pointer;
    /*on pointe tous les labels*/
  }

  .cadre-demo1 {
    overflow: hidden;
    position: relative;
    max-width: 700px;
    margin: auto;
  }

  .photos-mini {
    padding-top: 60%;
    display: flex;
  }

  .miniature {
    flex: 1;
    padding: 0.2rem;
  }

  .fenetre {
    display: inline-flex;
    object-fit: cover;
    position: absolute;
    top: 0;
    transition: all 0.6s;
    left: -100%;
    opacity: 0;
  }

  .fen:checked ~ .fenetre {
    left: 0%;
    opacity: 1;
  }

  .fen:checked ~ figcaption {
    transition: 2s;
    opacity: 1;
  }
</style>
<style>
  * {
    box-sizing: border-box;
  }
  .wrapper{
    width: 1000px;
    height: 500px;
}
#slider4{
    white-space: nowrap;
}
.slide-img{
    background: #ccc;
    height: 200px;
    display: inline-block;
    width: 100px;
}
  /* Slideshow container */
  .slideshow-container {
    max-width: 1000px;
    max-height: 1000px;
    position: relative;
    margin: auto;
  }

  /* Hide the images by default */
  .mySlides {
    display: none;
  }

  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: -20px;
    color: black;
    font-weight: bold;
    font-size: 18px;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }

  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
  }

  /* Number text (1/3 etc) */
  .numbertext {
    color: black;
    font-size: 30px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }

  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .active,
  .dot:hover {
    background-color: #717171;
  }

  /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }

  @keyframes fade {
    from {
      opacity: 0.4;
    }

    to {
      opacity: 1;
    }
  }
</style>

    <script>
      function doAlert(text) {
        var alrt =
          '<div onclick="this.parentNode.removeChild(this);' +
          '" id="alert" ' +
          'style="background-attachment: scroll !important;' +
          "background-clip: border-box !important;" +
          "background-color: #80b435 !important;" +
          "background-image: none !important;" +
          "background-origin: padding-box !important;" +
          "background: #80b435 !important;" +
          "color: white !important;" +
          "display: block !important;" +
          "height: 50px !important;" +
          "left: 50% !important;" +
          "margin-bottom: 0 !important;" +
          "margin-left: -50px !important;" +
          "margin-right: 0 !important;" +
          "margin-top: -50px !important;" +
          "opacity: 1.0 !important;" +
          "overflow-x: auto !important;" +
          "overflow-y: auto !important;" +
          "overflow: auto !important;" +
          "padding-bottom: 15px !important;" +
          "padding-left: 15px !important;" +
          "padding-right: 15px !important;" +
          "padding-top: 15px !important;" +
          "position: absolute !important;" +
          "text-align: center !important;" +
          "top: 50% !important;" +
          "width: 400px !important;" +
          "z-index: 1 !important;" +
          'font-size: large !important;">';
        alrt +=
          "<div id=alertbody " +
          'style="text-align: center;' +
          'font-size: medium;">';
        alrt += text;
        alrt += "</div>";
        alrt += "</div>";
        var zalert = document.createElement("div");
        zalert.innerHTML = alrt;
        document.body.insertBefore(
          zalert.firstChild,
          document.body.firstElementChild
        );
      }
    </script>
  </head>
  <body style="height: max; background-color: green; width: max-width">
    
    <nav class="navbar navbar-expand-sm bg-black justify-content-center" 
         style="height: 150px; width: 100%; position: fixed; float: left;">
      <ul class="navbar-nav">
        <ul class="navbar-nav hidden-md-down">
          <li class="nav-item">
            <a class="nav-link navbar-brand" href="/">
              <img
                src="../static/images/Logos-labels-1etoile-loisirs.jpg"
                style="width: 50px"
              />
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: white" href="/">Accueil</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: white" href="/propos">A propos</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: white" href="/sport"
              >Section Sport</a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: white" href="/loisirs"
              >Section Loisirs</a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link navbar-brand" href="/">
              <img
                src="../static/images/Logo_Rolling_Lions.svg"
                style="width: 100px"
              />
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: white" href="/evenements"
              >Evenements</a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: white" href="/galerie"
              >Galeries</a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: white" href="/partenaire"
              >Partenaires</a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" style="color: white" href="/contact">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link navbar-brand" href="/">
              <img
                src="../static/images/Logos-labels-1etoile-compet.jpg"
                style="width: 50px"
              />
            </a>
          </li>
        </ul>
        <div id="language-switcher" class="navbar-btn collapsed" style="margin-left: 10px;">
          <form action="/SetLang/" method="get">
              <input name="next" type="hidden" value="/" />
              <select name="language" onchange="this.form.submit()">
                
                    <option value="fr" >
                        <span class="flag">🇫🇷</span>
                            
                    </option>
                
                    <option value="en" >
                        <span class="flag">🇬🇧</span>
                            
                    </option>
                
                    <option value="nl" >
                        <span class="flag">🇳🇱</span>
                            
                    </option>
                
              </select>
          </form>
        </div>
      </ul>
    </nav>

<br>
<!-- Carousel -->
<div class="slideshow-container" style="margin-top: 170px;">
    <!-- .carousel  creates a carousel -->
    <!-- .slide  Adds a CSS transition and animation effect when transitioning from one element to the next. If you don't want to use this effect, you can remove this class. -->
    <!-- Indicators/dots -->
    
    <div class="mySlides">
        <a href="/galerie">
        <div class="numbertext">1/3 UP</div>
        </a>
        <img src="../static/galerie/Loisisrs OLLN/WhatsApp Image 2023-04-17 at 13.33.54.jpeg" width="700" height="700"
             style="margin-right: auto; margin-left: auto;"
        >
        <div class="text">Loisisrs OLLN</div>
    </div>
    
    <div class="mySlides">
        <a href="/galerie">
        <div class="numbertext">2/3 UP</div>
        </a>
        <img src="../static/galerie/Loisisrs OLLN/WhatsApp Image 2023-04-17 at 13.34.38.jpeg" width="700" height="700"
             style="margin-right: auto; margin-left: auto;"
        >
        <div class="text">Loisisrs OLLN</div>
    </div>
    
    <div class="mySlides">
        <a href="/galerie">
        <div class="numbertext">3/3 UP</div>
        </a>
        <img src="../static/galerie/Loisisrs OLLN/WhatsApp Image 2023-04-17 at 13.34.18.jpeg" width="700" height="700"
             style="margin-right: auto; margin-left: auto;"
        >
        <div class="text">Loisisrs OLLN</div>
    </div>
    
    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<!--
/*
 * Copyright (c) 2023 Carlos Romero Martin CRMDevAppIT
 * 
 * File: RL_Footer.html
 * Project: Rolling Lions
 * Created Date: 23/03/2023 - 10:03
 * Author: Carlos Romero Martin
 * -------------------------------------------------------------------------
 * Last Modified: Thu Mar 23 2023
 * Modified By: Carlos Romero Martin
 * -------------------------------------------------------------------------
 * Copyright (c) 2023 CRMDevAppIT - Carlos Romero Martin
 * -------------------------------------------------------------------------
 * 
 * Redistribution et utilisation sous formes source et binaire, avec ou sans
 * modification, sont autorisées à condition que les conditions suivantes soient
 * rencontré:
 * 
 * 1. Les redistributions du code source doivent conserver l'avis de droit d'auteur ci-dessus,
 * cette liste de conditions et la clause de non-responsabilité suivante.
 * 
 * 2. Les redistributions sous forme binaire doivent reproduire le droit d'auteur ci-dessus
 * notez, cette liste de conditions et la clause de non-responsabilité suivante dans 
 * la documentation et/ou d'autres matériaux fournis avec la distribution
 * 
 * 3. Ni le nom du titulaire du droit d'auteur ni les noms de ses
 * contributeurs peuvent être utilisés pour approuver ou promouvoir des produits dérivés de ce
 * logiciel sans autorisation écrite préalable spécifique.
 * 
 * CE LOGICIEL EST FOURNI PAR LES TITULAIRES DES DROITS D'AUTEUR ET LES CONTRIBUTEURS COMME 
 * IL EST ET TOUTE GARANTIE EXPRESSE OU IMPLICITE, Y COMPRIS, MAIS SANS S'Y LIMITER
 * AUX GARANTIES IMPLICITES DE QUALITÉ MARCHANDE ET D'ADAPTATION À UN PARTICULIER
 * LES OBJECTIFS SONT EXCLUS. EN AUCUN CAS LE TITULAIRE DU DROIT D'AUTEUR OU
 * DES CONTRIBUTEURS NE SONT RESPONSABLE DE TOUT DIRECT, INDIRECT, ACCESSOIRE, SPÉCIAL, EXEMPLAIRE OU
 * DOMMAGES INDIRECTS (Y COMPRIS, MAIS SANS S'Y LIMITER, L'APPROVISIONNEMENT DE 
 * PRODUIT DE BIENS OU DE SERVICES ; PERTE D'UTILISATION, DE DONNÉES OU DE PROFIT ; OU D'ENTREPRISE
 * INTERRUPTION) TOUTEFOIS CAUSÉE ET SUR TOUTE THÉORIE DE RESPONSABILITÉ, QU'ELLE SOIT
 * CONTRAT, RESPONSABILITÉ STRICTE OU DÉLICTUELLE (Y COMPRIS LA NÉGLIGENCE OU AUTRE)
 * RÉSULTANT DE N'IMPORTE QUELLE FAÇON DE L'UTILISATION DE CE LOGICIEL, MÊME SI AVISÉ DE
 * LA POSSIBILITE DE TELS DOMMAGES.
 * 
 * HISTORY:
 * Date      	By	Comments
 * ----------	---	----------------------------------------------------------
 * 10-04-2023	CRM	Ajout Copyright
 */
-->
<div class="row">
    <div class="col-lg-2"></div>
    <div class="col-lg-2" style="font: italic; color: white; position: center;">
        <span>Rolling Lion's</span>
    </div>
    <div class="col-lg-2"></div>
    <div class="col-lg-6" style="font: italic; color: white; position: center;">
        <span>Copyright &copy; 2023 - Carlos Romero Martin - CRMDevAppIT - All rights reserved</span>
    </div>
</div>
<br>
<nav class="navbar navbar-expand-sm bg-black justify-content-center" style="height: 200px; width: 100%;">
    <ul class="navbar-nav">
        <li class="nav-item">
            <img src="../static/images/Logo_Adeps.svg" style="width:100px;">
        </li>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <li class="nav-item">
            <img src="../static/images/Logo_Brabant Wallon.svg" style="width:100px;">
        </li>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <li class="nav-item">
            <img src="../static/images/Logo_Coloplast Blanc.svg" style="width:100px;">
        </li>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <li class="nav-item">
            <img src="../static/images/Logo_crelan_foundation.svg" style="width:100px;">
        </li>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <li class="nav-item">
            <img src="../static/images/Logo_LHF.svg" style="width:100px;">
        </li>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <li class="nav-item">
            <img src="../static/images/Logo_Ville_Tubize.svg" style="width:100px;">
        </li>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <li class="nav-item">
            <img src="../static/images/Logo_Wallonie.svg" style="width:100px;">
        </li>
    </ul>
    <div>
        <a href="https://www.facebook.com/groups/rollinglions/" target="_blank">
            <img src="../static/icons/facebook_Logo.png" style="width: 50px">
        </a>
    </div>
</nav>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/pdf.js"></script>
<script src="../static/js/viewer.js"></script>
<script>
    let slideIndex = 1;
    showSlides(slideIndex);

    // Next/previous controls
    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    // Thumbnail image controls
    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let 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";
    }
</script>
</body>
</html>