I started with w3schools' "HOW TO" guide on making a slideshow, and while it gives options for either an automatic slideshow OR one with control arrows and slide indicators, it doesn't tell you how to do both.
After some searching on here, I found this (code at bottom of this post) -- Automatic slideshow with button -- but there are two problems with the solution:
- If I click on an indicator button at the bottom that is not the next to be displayed automatically, the slideshow will successfully jump to that item but will not continue to the slide that follows the one I've just clicked; instead, it will go to the slide that was to be displayed next in the case that I had never clicked a button at all. The same issue exists if I use the arrows; the bottom buttons are just easier to use as an example.
Ex. I have slides, labeled A, B, C, and D. The page loads and starts me on slide A. The designated time interval passes and the slideshow moves itself to B. I click on the slide indicator button to move myself to slide A, and it moves me to A. Then the page takes me to C, as if I had never clicked A. I want the slideshow to continue from where I click it (A) to start, not from where it had "intended" to go next before I clicked it (C). - If I click on any of the buttons to change the slide after only some of the time in the counter has passed, the counter doesn't reset; it continues as if I hadn't changed the slide, and then it starts over when it auto moves itself again.
Ex. Time before automatic slide change is 5 seconds. I click the right arrow after only 3 seconds of viewing slide A. The slideshow then shows be slide B but only for the remaining 2 seconds before proceeding to slide C.
I tried a number of solutions, such as creating functions to reset the interval timer, but all of them ended up breaking the code and making my slide show spaz out. I'd post a link to my Codepen to give an example of this, but ever since I made the pen earlier today, the site stops working once I even go onto my profile's "Pens" page. (If you're really interested, go to Codepen and look me up -- username is lgcorpora -- and try to click on the Pen called "Automatic slideshow with buttons" -- should be right near the top.)
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, 4000); // 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";
}#slide{
width:96%;
}
* {
box-sizing: border-box
}
.mySlides {
display: none
}
.slideshow-container {
width: auto;
position: relative;
margin: -10px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: #494B55;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #494B55;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2s;
animation-name: fade;
animation-duration: 2s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
.pics
{
border:3px solid #494B55;
width:200px;
}<div class="ss-container">
<div class="mySlides fade">
<img src="https://www.w3schools.com/css/img_5terre.jpg" class="pics"/>
</div>
<div class="mySlides fade">
<img src="https://www.w3schools.com/css/img_forest.jpg" class="pics"/>
</div>
<div class="mySlides fade">
<img src="https://www.w3schools.com/css/img_lights.jpg" class="pics"/>
</div>
<div class="mySlides fade">
<img src="https://www.w3schools.com/css/img_mountains.jpg" class="pics"/>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<!-- Putting in the click dots -->
<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>
</div>