Problem on side links on webpage built in PHP platform

Question

Web console from the pageI have a simple website based on PHP platform, then I decided to add an automatic JavaScript 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?

I have tried searching the queries, played with divs and tags but couldn't 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.

You might need to explain what is meant by "doesn't work"? Is PHP encountering errors or warnings? Or do you mean they render fine but... have the wrong `href` in the anchor or something? Explain how the link "breaks". — ficuscr, Jul 02 '19 at 19:45
When ever the js slider on the page is loaded, the side link on the page when clicked doesn't render to specific link page. It does not show any errors but the link just remain static and is clickable, the issue is not with "a href". — Av1nz, Jul 02 '19 at 20:43
Hey guys just seeking your help in figuring this problem, can this community help please. Appreciated! — Av1nz, Jul 03 '19 at 16:18
OK. So maybe you have a conflict with an click event handler or something else in the JS that stops normal propagation? With the snippet you've shared it is hard to know for sure. Best bet is probably using browser tools to try and gain insight, probably set a breakpoint and try and step through the JavaScript execution. fwiw: [Javascript Debugging line by line using Google Chrome](https://stackoverflow.com/questions/10638059/javascript-debugging-line-by-line-using-google-chrome) — ficuscr, Jul 03 '19 at 16:51
Are the "side links" you mention present in the code you shared? — ficuscr, Jul 03 '19 at 16:52
It's not present on the code that i shared. As i mentioned earlier, we have main navigation on the top of the header and side navigation on each page. It works fine if i remove the slider code from this page but when i again insert it and run then side link doesn't work. Does it have anything to do with PHP framework or layout. Just confused at this moment. — Av1nz, Jul 05 '19 at 19:26
Could be broken JavaScript in what was added. Some syntax error. Or a "collision". Could be duplicate class or id in use. Or you have an over zealous selector in use with some sort of event handing perhaps. Would use web browser to view full source and use web console tools to inspect. Without seeing things in their entreaty it is hard to offer much more. — ficuscr, Jul 06 '19 at 03:54
I found out that when i define script type on the head section with this code , the link works perfect but with this script the slide show speed is abnormal like it speed up on some slides and slows down not as per the speed defined on JS. But if i remove the same script, the speed of the slideshow remains fine but the side link stops working? Can you please tell me what exactly is the problem? — Av1nz, Jul 08 '19 at 17:33
If you can share a complete example, publicly, which fully recreates the issue, then I probably can. — ficuscr, Jul 08 '19 at 19:11
How do i share the full example publicly? wouldn't there be a security threats?> — Av1nz, Jul 09 '19 at 16:13
[How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) — ficuscr, Jul 09 '19 at 16:28
Can i have your email address sir? so that we can discuss much more on private way, Please — Av1nz, Jul 09 '19 at 17:44
To Simply my problem, when i use this script on my header file, the slideshow doesn't slide according to the speed i setup, for eg. first slide appears and then speeds up to second slide, third slide and fourth slide in 1 sec and then stops and again from first slide does same thing. i have set the slide show for 8 sec. — Av1nz, Jul 09 '19 at 17:50
Similarly if i don't put this code the side link doesn't work, but slideshow works according to the speed. This is my problem. How do i make both things work together? . Also , i have done the Js coding on the same page rather than creating it on another file. — Av1nz, Jul 09 '19 at 17:52

Problem on side links on webpage built in PHP platform

0 Answers0