I've spent the last couple of hours teaching myself some basic JavaScript, so please bear with me.
Currently, I have a simple code in place for a straightforward slideshow on a website. Here is the JavaScript I'm using (where the 'slide' class has an opacity of 0 and the 'current' class has an opacity of 1 to only show the 'current' slide):
<script>
var Slideshow = document.querySelectorAll('#slides .slide');
var Current = 0;
var Timer = setInterval(SlideMove,3000);
function SelectSlide(n) {
SlideMove(Current = n);
}
function SlideMove(n) {
Slideshow[Current].className = 'slide';
Current = (Current+1)%Slideshow.length;
Slideshow[Current].className = 'current slide';
}
</script>
Using CSS and HTML, I created 5 small squares positioned under the slideshow. Each square corresponds to one of the 5 photos in the slideshow. When clicked, I want the slideshow to move to that specific photo and continue the automatic loop from there.
Here is the HTML for the 5 squares (each square has the class 'selector'):
<div id="selectors">
<span class="selector" onclick="SelectSlide(0)"></span>
<span class="selector" onclick="SelectSlide(1)"></span>
<span class="selector" onclick="SelectSlide(2)"></span>
<span class="selector" onclick="SelectSlide(3)"></span>
<span class="selector" onclick="SelectSlide(4)"></span>
</div>
For the 'onclick' part, I thought I was instructing it to run a new JavaScript function I created called 'SelectSlide(n)', which looks like this:
function SelectSlide(n) {
SlideMove(Current = n);
}
Based on what I learned from a tutorial, I believed this would take the slide number inputted (n) and execute the SlideMove function with 'Current' set as 'n'. My expectation was that it would simply change the 'Current' value to the selected one and start the slideshow loop afresh from that point. However, it's not working as expected. Clicking on one of the selector boxes displays the desired image but doesn't hide the previous one, resulting in a chaotic display. Additionally, the newly chosen image may suddenly vanish.
I suspect the issue lies in the algorithm for the automatic slide transition loop and the fact that I'm not hiding the previous slide properly, but I'm unsure how to resolve it. Any advice you can offer would be greatly appreciated.
If my question seems unclear or poorly articulated in any way, feel free to ask for clarification.