Fullscreen Touch Slider In Vanilla JavaScript

Preview:

Description:

A responsive, fullscreen, touch-enabled slider/swiper implemented in pure JavaScript.

How to use it:

1. Add images as slides to the slider.

<div class="slider-container">
  <div class="slide">
    <img
      src="https://source.unsplash.com/qnVXHhUP0xU/1560x979"
    />
  </div>
  <div class="slide">
    <img
      src="https://source.unsplash.com/C49xQcDfHRs/1560x979"
    />
  </div>
  <div class="slide">
    <img
      src="https://source.unsplash.com/a-UL8yLaaM0/1560x979"
    />
  </div>
  <div class="slide">
    <img
      src="https://source.unsplash.com/hlRFJgjJxIk/1560x979"
    />
  </div>
  <div class="slide">
    <img
      src="https://source.unsplash.com/1HLuNSgKT18/1560x979"
      alt=""
    />
  </div>
</div>

2. The necessary CSS styles for the slider.

.slider-container {
  height: 100vh;
  display: inline-flex;
  scrollbar-width: none;
  overflow: hidden;
  scrollbar-width: none;
  transform: translateX(0);
  will-change: transform;
  transition: transform 0.3s ease-out;
  cursor: grab;
}
.slide{
  max-height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
@media(min-width: 1200px){
  .slide {
    padding: 3rem;
  }
}
.slide img{
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.3s ease-in-out;
  box-shadow: 5px 5px 50px -1px rgba(0, 0, 0.8);
  border-radius: 4px;
}
.grabbing {
  cursor: grabbing;
}
.grabbing .slide img{
  transform: scale(0.9);
  box-shadow: 5px 5px 40px -1px rgba(0, 0, 0.8);
}

3. Include the main script app.js on the page.

<script src="app.js"></script>

4. Or insert the following JS snippets into your JS.

const slider = document.querySelector('.slider-container'),
      slides = Array.from(document.querySelectorAll('.slide'))
let isDragging = false,
  startPos = 0,
  currentTranslate = 0,
  prevTranslate = 0,
  animationID,
  currentIndex = 0
slides.forEach((slide, index) => {
  const slideImage = slide.querySelector('img')
  // disable default image drag
  slideImage.addEventListener('dragstart', (e) => e.preventDefault())
  // touch events
  slide.addEventListener('touchstart', touchStart(index))
  slide.addEventListener('touchend', touchEnd)
  slide.addEventListener('touchmove', touchMove)
  // mouse events
  slide.addEventListener('mousedown', touchStart(index))
  slide.addEventListener('mouseup', touchEnd)
  slide.addEventListener('mousemove', touchMove)
  slide.addEventListener('mouseleave', touchEnd)
})
// make responsive to viewport changes
window.addEventListener('resize', setPositionByIndex)
// prevent menu popup on long press
window.oncontextmenu = function (event) {
  event.preventDefault()
  event.stopPropagation()
  return false
}
function getPositionX(event) {
  return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX
}
function touchStart(index) {
  return function (event) {
    currentIndex = index
    startPos = getPositionX(event)
    isDragging = true
    animationID = requestAnimationFrame(animation)
    slider.classList.add('grabbing')
  }
}
function touchMove(event) {
  if (isDragging) {
    const currentPosition = getPositionX(event)
    currentTranslate = prevTranslate + currentPosition - startPos
  }
}
function touchEnd() {
  cancelAnimationFrame(animationID)
  isDragging = false
  const movedBy = currentTranslate - prevTranslate
  // if moved enough negative then snap to next slide if there is one
  if (movedBy < -100 && currentIndex < slides.length - 1) currentIndex += 1
  // if moved enough positive then snap to previous slide if there is one
  if (movedBy > 100 && currentIndex > 0) currentIndex -= 1
  setPositionByIndex()
  slider.classList.remove('grabbing')
}
function animation() {
  setSliderPosition()
  if (isDragging) requestAnimationFrame(animation)
}
function setPositionByIndex() {
  currentTranslate = currentIndex * -window.innerWidth
  prevTranslate = currentTranslate
  setSliderPosition()
}
function setSliderPosition() {
  slider.style.transform = `translateX(${currentTranslate}px)`
}

Changelog:

12/19/2022

• use pointer events