flexbox carousel slider

easy flexbox carousel slider infinite progression

by elkcityhazard

HTML

<!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>

CSS

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;
}

JavaScript

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()