JSFiddle - React, Tailwind, and code Playground

by Jesse M

HTML

<div class="slider-container">
  <div class="slider-track">
    <div class="slide">
      <p>What is your idea of a perfect Saturday night?</p>
      <label><input type="radio" name="q1" value="Mark" data-points="2" /> Staying in and level up in your favorite video game</label>
      <label><input type="radio" name="q1" value="Louise" data-points="2" /> Getting ahead in your work</label>
      <label><input type="radio" name="q1" value="Cathy" data-points="2" /> Going out on the town with your friends</label>
      <label><input type="radio" name="q1" value="Ryan" data-points="2" /> Shooting some hoops on the court</label>
      <label><input type="radio" name="q1" value="Ridel" data-points="2" /> Checking out the latest film at the cinema</label>
      <label><input type="radio" name="q1" value="Nicole" data-points="2" /> Working on your next masterpiece</label>
    </div>
    <div class="slide">
      <p>What was your favorite subject in school?</p>
      <label><input type="radio" name="q2" value="Ryan" data-points="2" /> I prefer athletics! Give me b-ball over algebra any day.</label>
      <label><input type="radio" name="q2" value="Louise" data-points="2" /> So hard to pick a favorite. But probably science!</label>
      <label><input type="radio" name="q2" value="Cathy" data-points="2" /> Lunch! Sitting and chatting with my friends gets me through the day.</label>
      <label><input type="radio" name="q2" value="Nicole" data-points="2" /> Music and art are my passion.</label>
      <label><input type="radio" name="q2" value="Mark" data-points="2" /> Do I have to pick a favorite?</label>
      <label><input type="radio" name="q2" value="Ridel" data-points="2" /> School is beneath me. I focus my time on bigger projects outside of school.</label>
    </div>
    <div class="slide">
      <p>What word pairings might people use to describe you?</p>
      <label><input type="radio" name="q3" value="Ridel" data-points="2" /> Creative & Distant</label>
     ...

CSS

.slider-container {
  width: 500px;
  overflow: hidden;
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  width: 100%;
  flex-shrink: 0;
}

JavaScript

const sliderTrack = document.querySelector('.slider-track');
const slides = document.querySelectorAll('.slide');
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
const totalSlides = slides.length - 1;

let currentSlide = 0;

function nextSlide() {
  currentSlide = (currentSlide + 1) % slides.length;
  updateSlider();
}

function prevSlide() {
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  updateSlider();
}

function updateSlider() {
  const slideWidth = slides[0].offsetWidth;
  sliderTrack.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
  if(currentSlide == 0){
  	prevButton.setAttribute("disabled", "disabled");
  }else if(prevButton.hasAttribute("disabled")){
  	prevButton.removeAttribute("disabled");
  }
  if(totalSlides == currentSlide){
  	nextButton.setAttribute("disabled", "disabled");
  }else if(nextButton.hasAttribute("disabled")){
  	nextButton.removeAttribute("disabled");
  }
}

prevButton.addEventListener('click', prevSlide);
nextButton.addEventListener('click', nextSlide);

// Initial update
updateSlider();