const slider = document.querySelector('.carousel-wrapper') const prevBtn = document.getElementById('prev') const nextBtn = document.getElementById('next') let slideIndex = 1 let isMoving = false const start = slider.firstElementChild.cloneNode(true) const end = slider.lastElementChild.cloneNode(true) slider.appendChild(start) slider.prepend(end) function moveSlides() { slider.style.transform = `translate3d(-${slideIndex * 100}%, 0, 0)` } function slideHandler(type) { isMoving = true type !== 'prev' ? slideIndex += 1 : slideIndex -= 1 slider.style.transition = `transform 1000ms ease-in-out` moveSlides() } nextBtn.addEventListener('click', (e) => { if (isMoving) return slideHandler() }) prevBtn.addEventListener('click', (e) => { if (isMoving) return slideHandler('prev') }) slider.addEventListener('transitionend', () => { isMoving = false const slides = document.querySelectorAll('.slide') if (slideIndex <= 0) { slider.style.transition = "none" slideIndex = slides.length - 2 moveSlides() } if (slideIndex >= slides.length - 1) { slider.style.transition = "none" slideIndex = 1 moveSlides() } }) moveSlides()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Gallery!</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="app"> <div class="carousel-wrapper"> <div class="slide"> <img src="https://picsum.photos/id/237/1920/1080" alt="slide"> </div> <div class="slide"> <img src="https://picsum.photos/id/238/1920/1080" alt="slide"> </div> <div class="slide"> <img src="https://picsum.photos/id/239/1920/1080" alt="slide"> </div> <div class="slide"> <img src="https://picsum.photos/id/240/1920/1080" alt="slide"> </div> <div class="slide"> <img src="https://picsum.photos/id/241/1920/1080" alt="slide"> </div> </div> <button id="prev">Prev</button> <button id="next">Next</button> </div> <script type="module" src="./main.js"></script> </body> </html>
html, body { height: 100%; width: 100%; } #app { overflow:hidden; max-width: 768px; max-height: 100%; margin: auto; position: relative; } .carousel-wrapper { display: flex; max-width: 768px; margin: auto; width: 100%; height: 100%; } .slide { flex: 0 0 100%; height: 100%; width: 100%; } img { height: 100%; width: 100%; object-fit: cover; display: block; } #prev, #next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } #prev { left: 1em; } #next { right: 1em; }