I'm a beginner and I'm having a hard time trying to implement autoplay to my image slider.
I guess I would have to use setTimeout() but I can't tell where. I was taking a look at the w3schools tutorial and I've tried to add the animation by creating an autoPlay() function, using a for loop, setTimeout, and calling the function inside init(), but that didn't work. Could someone help me? I appreciate it
Here's my code:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://kit.fontawesome.com/a7d8945663.js" crossorigin="anonymous" ></script> <title>Image Slider</title> </head> <body> <div class="wrapper"> <div class="slide-btn-prev"><i class="fas fa-chevron-left"></i></div> <div class="container-slider"> <div class="slide-img"> <img src="./img/odin.png" alt="" /> </div> <div class="slide-img"> <img src="./img/web-1.jpeg" alt="" /> </div> <div class="slide-img"> <img src="./img/web-2.jpg" alt="" /> </div> </div> <div class="slide-btn-next"><i class="fas fa-chevron-right"></i></div> </div> <div class="navigation-dots"></div> <script src="main.js"></script> </body> </html> JS
const slideImage = document.querySelectorAll('.slide-img'); const slideContainer = document.querySelector('.container-slider'); const nextBtn = document.querySelector('.slide-btn-next'); const prevBtn = document.querySelector('.slide-btn-prev'); const navigationDots = document.querySelector('.navigation-dots'); let numberOfImages = slideImage.length; let slideWidth = slideImage[0].clientWidth; let currentSlide = 0; //set up slider function init() { slideImage.forEach((img, i) => { img.style.left = i * 100 + '%'; }); slideImage[0].classList.add('active'); createNavigationDots(); } //create navigatiton dots function createNavigationDots() { for (let i = 0; i < numberOfImages; i++) { const dot = document.createElement('div'); dot.classList.add('single-dot'); navigationDots.appendChild(dot); dot.addEventListener('click', () => { goToSlide(i); }); } navigationDots.children[0].classList.add('active'); } //next & prev buttons nextBtn.addEventListener('click', () => { if (currentSlide >= numberOfImages - 1) { goToSlide(0); return; } currentSlide++; goToSlide(currentSlide); }); prevBtn.addEventListener('click', () => { if (currentSlide <= 0) { goToSlide(numberOfImages - 1); return; } currentSlide--; goToSlide(currentSlide); }); function goToSlide(slideNumber) { slideContainer.style.transform = 'translateX(-' + slideWidth * slideNumber + 'px)'; currentSlide = slideNumber; setActiveClass(); } function setActiveClass() { //set active class to slide let currentActive = document.querySelector('.slide-img.active'); currentActive.classList.remove('active'); slideImage[currentSlide].classList.add('active'); //set active class to dot let currentDot = document.querySelector('.single-dot.active'); currentDot.classList.remove('active'); navigationDots.children[currentSlide].classList.add('active'); } init(); 
没有评论:
发表评论