How to solve javascript slideshow not displaying automatically after angularjs routing

问题

I have a slideshow in my html page which should run automatically once the page loads. It workes fine till I used angularJs routing, and doesn't show automatically once the page is loaded as a template. I have to click the next arrow for the slides to show. What could be the problem: here is my code.

My Layout Template Code:

<!DOCTYPE html>
<html ng-app="main">
    <head>
        <title>Woodworld</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css?family=Cabin+Condensed|Exo+2|Ibarra+Real+Nova|Muli|Open+Sans|Oswald|PT+Sans|Public+Sans|Quicksand|Roboto|Source+Serif+Pro|Yantramanav&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="stylesanimate.css">
        <link rel="stylesheet" href="data/images/css/all.css">
        <link rel="stylesheet" href="styles/layoutstyle.css">
        <link rel="stylesheet" media="screen and (min-width:500px)" href="styles/medium-screens.css">
        <link rel="stylesheet" media="screen and (min-width:1050px)" href="styles/large-screens.css">
        <script src="scripts/angular.min.js"></script>
        <script src="scripts/angular-route.min.js"></script>
        <script src="scripts/services.js"></script>
        <script src="scripts/controllers.js"></script>
        <script src="scripts/modules.js"></script>
        <script src="scripts/stylescript.js"></script>
    </head>
    <body onload="showSlides()">
        <div ng-view class="ng-scope">
        </div>
    </body>
    </html>

The Javascript Code:

var slideIndex = 1;
// Next/previous controls
function plusSlides(n) {
        showSlides(slideIndex += n);
      }
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slide");
  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", "");
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1;}
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 5000);
}

The template with slideShow:

<div class="slideContainer">
    <div class="slide fade">
        <img src="data/images/trees.jpg">
        <div class="slideText">The surest way to fight climate change.</div>
    </div>
    <div class="slide fade">
        <img src="data/images/treeplanting1.jpg">
        <div class="slideText"><p>Partner with us in planting trees</p></div>
    </div>
    <div class="slide fade">
        <img src="data/images/trees.jpg">
        <div class="slideText"><p>Help us preserve the future we have.</p></div>
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<div class="dotContainer">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>

来源：https://stackoverflow.com/questions/59833824/how-to-solve-javascript-slideshow-not-displaying-automatically-after-angularjs-r

标签

javascript

html

css

angularjs

slideshow