I have a clone slide and I want to make the track to jump on the first slide or ‘second slide’ when I get to the slide clone. Do you have any ideas on how I can do that? Here is the code: https://codepen.io/raul-rogojan/pen/wVGXVM?editors=0010
@SempervivumJul 29.2019 — #I recommend using the slideshow from the tutorial you posted previously. The code is clear and inserting the clones should be easy.
@codyhillauthorJul 29.2019 — #@Sempervivum#1606886 that's exactly what I did. The problem is that I can't figure out how I can make the track to jump to the first slide once it gets to the last clone.
@SempervivumJul 29.2019 — #I see. IMO the variable names in the tutorial are more meaningful.
Appending the first slide at the end seems to work fine. For skipping to the first slide after the last one has been reached I recommend to use the code from the tutorial.
@KeverJul 30.2019 — #You'll have to move the code for the update from the transitionend function to a place where it runs immediately. So the click function of the next/prev button or the updatedots function. function updateDots(currentDot, targetDot) { currentDot.classList.remove('active-dot'); targetDot.classList.add('active-dot'); <br/> if (slides[counter].id === 'last-clone') { updateDots(dots[dots.length-1], dots[1]); } if (slides[counter].id === 'first-clone') { updateDots(dots[0], dots[dots.length-2]); } }
@codyhillauthorAug 01.2019 — #@Kever#1607012 Yeah :)) that's a problem. Unfortunately, I'm gonna have to deal with it.
There might be another fix but I don't know how to do it. I could set a time on every slide that needs to pass before allowing the user to go to the next slide. Basically not allow the user to click rapidly on any slide.
@KeverAug 01.2019 — #I cleaned up some repeating code, so you don't have to mind for the updateDots function at several places. Seems to work fine now.const track = document.querySelector('[data-track]'); const nextBtn = document.querySelector('[data-button-next]'); const prevBtn = document.querySelector('[data-button-prev]'); const navDots = document.querySelector('[data-dots-nav]'); const updateTime = 3500;
const slides = Array.from(track.children); const dots = Array.from(navDots.children); let counter = 1; let nextTimer;
//This is the first slide that needs to pushed to the end const firstSlide = slides[0]; const firstSlideClone = firstSlide.cloneNode(true); firstSlideClone.setAttribute('id', 'last-clone');
//This is the last slide that needs to be unshifted to the front const lastSlide = slides[slides.length-2]; const lastSlideClone = lastSlide.cloneNode(true); lastSlideClone.setAttribute('id', 'first-clone');
var currentDot = navDots.querySelector('.active-dot'); var newDot = dots[(dots.length + counter - 1) % dots.length]; updateDots(currentDot, newDot); // reset the current timer so it doesn't run right after a user initiated update clearTimeout(nextTimer); nextTimer = setTimeout(nextImg, updateTime); }
// Dots caode navDots.addEventListener('click', e => { var clickedDot = e.target.closest('button'); if(clickedDot === null) { return; };
@codyhillauthorAug 01.2019 — #@Kever#1607062 Thanks, man! I looked over it and I will try to replicate it. Just one question tho. What does % dots.length mean?