https://www.w3schools.com/howto/howto_js_slideshow.asp used this link and I wanted a slideshow that repeats every 5 seconds. Got that working, bu the three dots and the arrows to change pictures didn't work so I tried combining them. This worked, kind of, but for some reason whenever i clicked to change manually it messed up the automatic timer and just changed randomly and quickly. Not practical at all. Here is my code.
AutoMatic SlideShow + Manual Slideshow = Broken
in HTML/XHTML
Posted
https://www.w3schools.com/howto/howto_js_slideshow.asp used this link and I wanted a slideshow that repeats every 5 seconds. Got that working, bu the three dots and the arrows to change pictures didn't work so I tried combining them. This worked, kind of, but for some reason whenever i clicked to change manually it messed up the automatic timer and just changed randomly and quickly. Not practical at all. Here is my code.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="HomeStyle.css">
<head>
<Title> RPR Architecture Home Page</Title>
<style>
a#Links{padding: 1px; margin: 0px; font-size:25px;border: 2px solid steelblue}
a#Links2{color:white; font-family: Arial; width: 300px; padding: 1px; margin: 0px; font-size:25px; text-decoration: none;}
</style>
</head>
<body>
<h1>RPR <i>Architecture</i> & Design</h1>
<br> <center><div id="Links"><a href="Photo%20Gallery.html" id="Links2">   Photo Gallery  </a> <a href="Contact.html" id="Links2" style="margin: 0px 1px 0px -3px;">   Contact  </a><a id="Links2" href="About%20RPR.html">  About RPR   </a></div></center>
<br><br><br> <div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="Pictures/Photo%20Gallery%20Image%206.jpg" border="3" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="Pictures/Photo%20Gallery%20Image%204.jpg" border="3" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="Pictures/Home%20Page%20Picture.jpg" border="3" style="width:100%">
<div class="text"></div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<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>
</body>
<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
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.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4700);
}
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides.style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 5000); // Change image every 2 seconds