I am trying to make a automated slideshow that will allow quotes to be displayed in intervals as the user loads the index.html. I have managed to get a manually controlled one working, however cannot automate it, however I can get it to bring a manually controlled one, but automating it seems to be another thing.

Here is the HTML of the slides

```
     <!-- Slideshow container -->
                <div id="slideshow-container">

                    <!-- Full-width slides/quotes -->
                    <div class="slide" onload="change()">
                        <q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
                        <p class="author">- John Keats</p>
                    </div>

                    <div class="slide">
                        <q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
                        <p class="author">- Ernest Hemingway</p>
                    </div>

                    <div class="slide">
                        <q>I have not failed. I've just found 10,000 ways that won't work.</q>
                        <p class="author">- Thomas A. Edison</p>
                    </div>

                </div>
                <!-- Dots/bullets/indicators -->
                <div class="dot-container">
                    <span class="dot" onclick="currentSlide(1)"></span>
                    <span class="dot" onclick="currentSlide(2)"></span>
                    <span class="dot" onclick="currentSlide(3)"></span>
                </div>

```

I have been using [w3schools](https://www.w3schools.com/howto/howto_js_slideshow.asp) for the CSS of the carousel, however will be changing it once I have it automated in order to better suit the requirements

below is the js linked in the foot of the body so as to ensure it loads.

```
    var slideIndex = 1;
    change(slideIndex);

    function plusSlides(n)
    {
      if (n >= 2)
      {
        n = 1;
      }
      change(slideIndex += n);
    }

    function currentSlide(n) {
      change(slideIndex = n);
    }

    function change(n)
    {
      var i;
      var slides = document.querySelectorAll('.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", "");
        }
      slides[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " active";

    }

    window.setInterval(change, 1000)
    window.setInterval(plusSlides, 1100)

```

I have been using [w3schools](https://www.w3schools.com/howto/howto_js_slideshow.asp) to try to get the function, however I haven't been doing to good of a job at it.

I thought it might be a good idea to use set interval twice to change the index value and recall the change function, however it didn't work.

I would love to know where I am going wrong here and how to get it to work in a more fluid motion.