Thank you so much new script gives me a great start to see how the functionality works. In the script can you explain how to change playing the slideshow once as opposed to playing continuously, or button play to end and stop and button go to start and stop to show difference in code please.Been changing button true false seems to work a bit better Big hack but if you remove active link below it plays only once. now buttons need tweaking after slideshow has finished. if only firing slideshow once add activelink=0 to play button and remove at function goToNextItem()…else, see notes below
<script>
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
//if changed this stops slideshow instead of restarting at clicked link after stop button is pressed
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
var position = link.getAttribute("data-pos");
var translateValue = "translate3d(0px," + position + ", 0px)";
wrapper.style["transform"] = translateValue;
link.classList.add("active");
}
//
// The code for sliding the content automatically
//
var timeoutID;
function startTimer() {
// wait 2 seconds before calling goInactive this changes speed of slideshow
timeoutID = window.setInterval(goToNextItem, 40);
//setTimeout(goToNextItem, 2000);
}
//startTimer(); add this to run automatically
function resetTimer() {
window.clearInterval(timeoutID);
startTimer();
}
function goToNextItem() {
//take out to make all links active
removeActiveLinks();
if (activeLink < links.length - 1) {
activeLink++;
}
else {
//activeLink = 0; insertfor looping playback
}
var newLink = links[activeLink];
changePosition(newLink);
}
let startButton = document.querySelector("#startButton");
let pauseButton = document.querySelector("#pauseButton");
let playButton = document.querySelector("#playButton");
let replayButton = document.querySelector("#replayButton");
startButton.disabled = true;
playButton.disabled = false;
pauseButton.disabled = true;
startButton.addEventListener("click", () => {
window.location.reload();
pauseButton.disabled = false;
playButton.disabled = false;
});
pauseButton.addEventListener("click", () => {
window.clearInterval(timeoutID);
startButton.disabled = false;
pauseButton.disabled = true;
playButton.disabled = false;
});
playButton.addEventListener("click", () => {
window.clearInterval(timeoutID);
startTimer();
activeLink = 0;//can set what frame to start with
startButton.disabled = false;
pauseButton.disabled = false;
playButton.disabled = true;
});
replayButton.addEventListener("click", () => {
activeLink = 0;
window.clearInterval(timeoutID);
removeActiveLinks();
changePosition(document.querySelector("#Nw1"));
startTimer();
pauseButton.disabled = false;
playButton.disabled = false;
});
</script>