JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<section id="slideshow">
  <div class="prev">prev</div>
  <div class="next">next</div>
  <ul>
    <li class="active">
      <img src="https://placeholdit.imgix.net/~text?txtsize=23&bg=ff0000&txtclr=ffffff&txt=250%C3%97250&w=500&h=250" alt="">
      <p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza</p>
    </li>
    <li>
      <img src="https://placeholdit.imgix.net/~text?txtsize=23&bg=ffff00&txtclr=000000&txt=250%C3%97250&w=500&h=250" alt="">
      <p>Corporis cumque doloremque fugit illum neque repudiandae similique temporibus, voluptatibus.</p>
    </li>
    <li>
      <img src="https://placeholdit.imgix.net/~text?txtsize=23&bg=ff00ff&txtclr=000000&txt=250%C3%97250&w=500&h=250" alt="">
      <p>Corporis cumque doloremque fugit illum neque repudiandae similique temporibus, voluptatibus.</p>
    </li>
    <li>
      <img src="https://placeholdit.imgix.net/~text?txtsize=23&bg=00ff00&txtclr=000000&txt=250%C3%97250&w=500&h=250" alt="">
      <p>Corporis cumque doloremque fugit illum neque repudiandae similique temporibus, voluptatibus.</p>
    </li>
  </ul>
  <ol>
    <li class="active">sdfds</li>
    <li>dsf</li>
    <li>sdf</li>
    <li>werwe</li>
  </ol>
</section>

SCSS

#slideshow {
  width: 100%;
  margin: auto;
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    max-width: 100%;
    overflow:hidden;
    min-height: 469px;
    position: relative;
    width: 100%;

    display: inline-block;
    white-space: nowrap;

    li {
      position: absolute;
      left: 100%;
      width: 100%;
      height: 100%;
      max-width: 100vw;
      -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;

      &.active {
        left: 0;
      }
      
      

      p {
        background-color: #f5f5f5;
        box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.23);
        white-space: normal;
        width: 200px;
        margin: 0;
      }
    }
  }
  
  ol {
    li.active {
      color: red;
    }
  }
}

JavaScript

var CHESLIDESHOW = (function() {
  var slideCurrentIndex = 0;
  var changeInProgress = false;
  var slideSelector = document.getElementById('slideshow');
  var slidesAmount = slideSelector.querySelectorAll('ul li').length;
  var slidesNav = slideSelector.querySelectorAll('ol li');
  var slideCurrent;
  var slideToShow;
  var paused = false;
  var direction;
 

  function animateSlides(newDirection) {
    // prevents function from running while an animation is active
    if (changeInProgress) {
      return false;
    }
    changeInProgress = true;

    direction = newDirection;
    setTargets(newDirection);

    // set indicators to next state
    slidesNav[slideCurrentIndex].classList.remove('active');
    slidesNav[slideToShowIndex].classList.add('active');

    currentSlide.style.left = direction === 'next' ? '-100%' : '100%';
    slideToShow.style.left = '0%';

    currentSlide.classList.remove('active');
    slideToShow.classList.add("active");

    setTimeout(function() {
      slideToShow.style.left = '0%';

      slideCurrentIndex = slideToShowIndex;
      if (slideCurrentIndex == (slidesAmount - 1) && direction === 'next') {
        slideSelector.querySelectorAll('ul li')[slidesAmount - (slideCurrentIndex + 1)].style.left = '100%';
      } else if (slideCurrentIndex == 0 && direction === 'prev') {
        slideSelector.querySelectorAll('ul li')[slidesAmount - 1].style.left = '-100%';
      }
      console.log('slideCurrentIndex after ' + slideCurrentIndex);
      changeInProgress = false;
    }, 500)

  }

  function setTargets() {

    if (direction === "prev") {
      if (slideSelector.querySelectorAll('ul li')[slideCurrentIndex - 1] === undefined) {
        slideToShowIndex = (slidesAmount - 1);
      } else {
        slideToShowIndex = slideCurrentIndex - 1;
      }
    } else {
      if (slideSelector.querySelectorAll('ul li')[slideCurrentIndex + 1] === undefined) {
        slideToShowIndex = 0;
      } else {
        slideToShowIndex =...