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 slider--filling">
    <div class="slider__item slider__item--filling slider__item--showing">
      <p class="slider__content">1</p>
    </div>
    <div class="slider__item slider__item--filling">
      <p class="slider__content">2</p>
    </div>
    <div class="slider__item slider__item--filling">
      <p class="slider__content">3</p>
    </div>
    <div class="slider__controls slider__controls--filling">
      <span class="slider__toggle slider__toggle--active"></span>
      <span class="slider__toggle"></span>
      <span class="slider__toggle"></span>
    </div>
    <div class="slider__previous-btn"></div>
    <div class="slider__next-btn"></div>
  </div>

  <div class="slider slider--decor">
    <div class="slider__item slider__item--decor slider__item--showing">
      <p class="slider__content">1</p>
    </div>
    <div class="slider__item slider__item--decor">
      <p class="slider__content">2</p>
    </div>
    <div class="slider__item slider__item--decor">
      <p class="slider__content">3</p>
    </div>
    <div class="slider__controls slider__controls--decor">
      <span class="slider__toggle slider__toggle--active"></span>
      <span class="slider__toggle"></span>
      <span class="slider__toggle"></span>
    </div>
    <div class="slider__previous-btn"></div>
    <div class="slider__next-btn"></div>
  </div>
  
</body>
</html>

CSS

.slider {
  background-color: gray;
  position: relative;
  width: 200px;
  height: 300px;
}
.slider__item {
  display: none;
  background-color: red;
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
}
.slider__item--showing {
    display: inline-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;
}
.slider__previous-btn,
.slider__next-btn {
  background-color: black;
  position: absolute;
  top: 100px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.slider__next-btn {
  right: 0;
}
@media (min-width: 768px) {
  .slider__controls {
    display: none;
  }
}
@media (max-width: 767px) {
  .slider__previous-btn,
  .slider__next-btn{
    display: none;
  }
}

JavaScript

'use strict';

  var slides = document.querySelectorAll('.slider .slider__item');
  var slidesFilling = document.querySelectorAll('.slider .slider__item--filling');
  var slidesSize = document.querySelectorAll('.slider .slider__item--size');
  var slidesDecor = document.querySelectorAll('.slider .slider__item--decor');
  var togglesFilling = document.querySelectorAll('.slider--filling .slider__toggle');
  var togglesSize = document.querySelectorAll('.slider--size .slider__toggle');
  var togglesDecor = document.querySelectorAll('.slider--decor .slider__toggle');
  var previousBtnFilling = document.querySelectorAll('.slider--filling .slider__previous-btn');
  var nextBtnFilling = document.querySelectorAll('.slider--filling .slider__next-btn');
  var previousBtnDecor = document.querySelectorAll('.slider--decor .slider__previous-btn');
  var nextBtnDecor = document.querySelectorAll('.slider--decor .slider__next-btn');
  var currentSlide = 0;
  var mqMobile = window.matchMedia("(min-width: 768px)");
  var mqTablet = window.matchMedia("(max-width: 767px)");

  if (mqTablet.matches) {
    slidesDecor[currentSlide + 1].classList.add('slider__item--showing');
  }
  
  var onClick = function(toggles, slides) {
    toggles = [].slice.apply(toggles);
    toggles.forEach(function (toggle, i) {
      toggle.addEventListener('click', function() {
        goToSlide(i, toggles, slides);
      });
    });
  };

  var onClickPrevious = function(containerBtn, slides) {
    [].forEach.call(containerBtn, function (btn) {
      btn.addEventListener('click', function() {
        previousSlide(slides);
      });
    });
  };

  var previousSlide = function (slides) {
    for (var i = 0; i < slides.length; i++) {
      var slidesShow = (slides[i].parentNode.querySelectorAll('.slider__item--showing').length);
    }
    currentSlide = currentSlide - slidesShow;

    if (slidesShow == 2 && slides.length % 2 == 1 && currentSlide == -1) {
      goToSlide(currentSlide + 1, false, slides);
   ...