JSFiddle - React, Tailwind, and code Playground

by ramax12

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="slider">
    <div class="slider__item">
      <p class="slider__content">1</p>
    </div>
    <div class="slider__item">
      <p class="slider__content">2</p>
    </div>
    <div class="slider__item">
      <p class="slider__content">3</p>
    </div>
    <div class="slider__item">
      <p class="slider__content">4</p>
    </div>
    <div class="slider__item">
      <p class="slider__content">5</p>
    </div>
    <div class="slider__item">
      <p class="slider__content">6</p>
    </div>
    <div class="slider__item">
      <p class="slider__content">7</p>
    </div>
    <div class="slider__controls">
      <span class="slider__toggle slider__toggle--active"></span>
      <span class="slider__toggle"></span>
      <span class="slider__toggle"></span>
      <span class="slider__toggle"></span>
      <span class="slider__toggle"></span>
    </div>
  </div>
  
</body>
</html>

CSS

.slider {
  background-color: gray;
  width: 200px;
  height: 300px;
}
.slider__item {
  display: none;
  background-color: red;
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
}
.slider__item--showing {
    display: block;
}
.slider__content {
  font-size: 30px;
}
.slider__toggle {
  background-color: green;
  display: inline-block;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.slider__toggle--active {
  background-color: yellow;
}

JavaScript

'use strict';

  var slides = document.querySelectorAll('.slider .slider__item');
  var toggles = document.querySelectorAll('.slider .slider__toggle');
  var currentSlide = 0;
  var touchstartX = 0;
  var touchstartY = 0;
  var touchendX = 0;
  var touchendY = 0;

  slides[currentSlide].classList.add('slider__item--showing');

  var previousSlide = function () {
    goToSlide(currentSlide - 1);
  }

  var nextSlide = function () {
    goToSlide(currentSlide + 1);
  }

  var goToSlide = function (n) {
    [].forEach.call(slides, function (containerItem) {
      containerItem.classList.remove('slider__item--showing');
    });
    [].forEach.call(toggles, function (containerToggle) {
      containerToggle.classList.remove('slider__toggle--active');
    });

    currentSlide = (n + slides.length) % slides.length;
    if (n == toggles.length - 1 && slides.length > toggles.length) {
      slides[currentSlide].classList.add('slider__item--showing'); //???
      toggles[currentSlide - 1].classList.add('slider__toggle--active');
    }
    else {
      slides[currentSlide].classList.add('slider__item--showing');
      toggles[currentSlide].classList.add('slider__toggle--active');
    }
  };
  
  toggles = [].slice.apply(toggles);
  toggles.forEach(function (toggle, i) {
    toggle.addEventListener('click', function() {
      goToSlide(i);
    });
  });

  [].forEach.call(slides, function (containerItem) {
    containerItem.addEventListener('touchstart', function(evt) {
        touchstartX = evt.changedTouches[0].screenX;
        touchstartY = evt.changedTouches[0].screenY;
    }, false);

    containerItem.addEventListener('touchend', function(evt) {
        touchendX = evt.changedTouches[0].screenX;
        touchendY = evt.changedTouches[0].screenY;
        if (touchendX < touchstartX) {
            nextSlide();
        }
        if (touchendX > touchstartX) {
            previousSlide();
        }
    }, false);
  });