user7366442 user7366442 - 2 days ago 3
Javascript Question

Turn Javascript SlideShow from intervals to array

I am attempting to implement a "Share" button into my existing slide show, which operated on a "setInterval()" method that would flip through images every 5 seconds. The point of the share button is for a user to like a certain "slide", and be able to click a share button to send that certain slide they are looking at. My first concern is that I believ it is impossible to judge which slide the share button is clicked on (since the same button is used on the whole "slideShow", hard to judge where the button was clicked). I believe the best way to go would be to make my slideshow work on an array (Please let me know if you think otherwise). By making it an array, I believe it would be easier for the share button to access which index the user is on inside the slideshow, and send that certain one they are viewing. However, I am very new to Javascript in general, and do not know how I can convert this slideshow to work with an array. I have the following code operating the interval:

var slides = document.querySelectorAll('#slides .slide');
var allSlides = document.getElementById('slides');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,6000);
var playing = true;

//Controls
var pauseButton = document.getElementById('pause');
var backButton = document.getElementById('back');
var forwardButton = document.getElementById('forward');
var shareButton = document.getElementById('share');

//Share Modal
var shareModal = document.getElementById('shareModal');
var closeShare = document.getElementById('closeShare');

function nextSlide(){
if(playing){
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide showing';
clearInterval(slideInterval);
slideInterval = setInterval(nextSlide,6000);
} else{
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide showing';
pauseSlideshow();
};
}
function previousSlide(){
if(playing){
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide-1)%slides.length;
slides[currentSlide].className = 'slide showing';
clearInterval(slideInterval);
slideInterval = setInterval(nextSlide,6000);
} else{
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide-1)%slides.length;
slides[currentSlide].className = 'slide showing';
pauseSlideshow();
};
}


This code flips through each slide and the user is able to use the controls to go forward and backwards. What would be the best way to proceed if I would like to implement an array into this? (in order to access which slide the user is on) Thanks a ton in advance for your help.

Answer

One tactic that comes to mind:

var shares = [];

shareButton.addEventListener("click", function(){
    shares.push(currentSlide);
}

Any time the share button is clicked, the index of that slide is added to the shares array. You can later iterate over the array of shares.