Problem on side links on webpage built in Php platform

I have a simple website based on PHP platform, then i decided to add a automatic java script slider on one of the specific page, before then that the side link works fine but when automatic slide show kicks in the side link doesn't work. Again i removed the slideshow code then it again works fine? My question is how can i make the js slideshow and side link work? Thank you for your help...

I have tried searching the queries, played with divs and tags but couldnot find the solution

<div id="slide">
  <div class="slideshow-container">
    <div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 1.png" style="width:100%" alt=""> </div>
    <div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 6.png" style="width:100%" alt=""> </div>
    <div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 7.png" style="width:100%" alt=""> </div>
    <div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 9.png" style="width:100%" alt=""> </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div>

    <tr>
        <td>

  <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>
  <span class="dot" onclick="currentSlide(4)"></span>


        <script>
        var slideIndex = 0;
            showSlides();
            var slides,dots;

            function showSlides() {
                var i;
        slides = document.getElementsByClassName("mySlides");
        dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex> slides.length) {slideIndex = 1}
        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";
        setTimeout(showSlides, 8000); // Change image every 8 seconds
            }

            function plusSlides(position) {
        slideIndex +=position;
        if (slideIndex> slides.length) {slideIndex = 1}
        else if(slideIndex<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 currentSlide(index) {
        if (index> slides.length) {index = 1}
        else if(index<1){index = 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[index-1].style.display = "block";
        dots[index-1].className += " active";
            }
        </script>
      </div>
        </td>
        </tr>
    </div>

    </td>
    </tr>



I want my side navigation link to be working with slideshow, when slideshow loads as the side link doesnot navigate me to other page.