javasccript code not working in jsp : I am about to do an image slider and the javascript is not working in the code.
i embedded it in an external javascript file and also the internal file that am working with but its not working.
i am using netbeans ide to develop a Java Web App using jsp and servlets

    `<!DOCTYPE html>
      <html>
      <style> 
        .mySlides {display:none}

        /* Slideshow container */
         .slideshow-container {
          max-width: 1000px;
          position: relative;
          margin: auto;
         }

        /* Next & previous buttons */
         .prev, .next {
         cursor: pointer;
         position: absolute;
         top: 50%;
         width: auto;
         padding: 16px;
         margin-top: -22px;
         color: white;
         font-weight: bold;
         font-size: 18px;
         transition: 0.6s ease;
         border-radius: 0 3px 3px 0;
        }

        /* 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: #f2f2f2;
       font-size: 12px;
       padding: 8px 12px;
       position: absolute;
       top: 0;
       }

      /* The dots/bullets/indicators */
       .dot {
       cursor:pointer;
       height: 13px;
       width: 13px;
        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 {
       -webkit-animation-name: fade;
       -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
        }

        @keyframes fade {
        from {opacity: .4} 
         to {opacity: 1}
         }

       /* On smaller screens, decrease text size */
       @media only screen and (max-width: 300px) {
      .prev, .next,.text {font-size: 11px}
       } 
        </style>
      </head>
      <body>
       <div class="slideshow-container">
       <div class="mySlides fade">
       <div class="numbertext">1 / 3</div>
       <img src="resources/img_03.jpg" style="width:100%">
       <div class="text">Caption Text</div>
       </div>

       <div class="mySlides fade">
       <div class="numbertext">2 / 3</div>
       <img src="resources/img_01.jpg" style="width:100%">
       <div class="text">Caption Two</div>
        </div>

        <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
         <img src="resources/img_02.jpg" style="width:100%">
         <div class="text">Caption Three</div>
        </div>

        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>

       </div>
       <br>

      <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>
       </section>
       <script>
         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";
      }
      </script>
      </body>
     </html>
`

i don't know how to make the javascript have effect on the image slider.
