JSFiddle - React, Tailwind, and code Playground

by Luis Perez

HTML

<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>SLIDE FIX</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  </head>

  <body>
    <section id="wrapper">

      <div class="content-slider-nav-btn nav-left"><i class="fa fa-chevron-left"></i></div>
      <div class="content-slider-nav-btn nav-right"><i class="fa fa-chevron-right"></i></div>

      <div class="flex">

        <div class="flex-item">
          <h1 class="content-slider-title"><a href="#">item-0</a></h1>
        </div>

        <div class="flex-item">
          <h1 class="content-slider-title"><a href="#">item-1</a></h1>
        </div>

        <div class="flex-item">
          <h1 class="content-slider-title"><a href="#">item-2</a></h1>
        </div>

        <div class="flex-item">
          <h1 class="content-slider-title"><a href="#">item-3</a></h1>
        </div>

        <div class="flex-item">
          <h1 class="content-slider-title"><a href="#">item-4</a></h1>
        </div>

        <div class="flex-item">
          <h1 class="content-slider-title"><a href="#">item-5</a></h1>
        </div>

        <div class="flex-item">
          <h1 class="content-slider-title"><a href="#">item-6</a></h1>
        </div>

        <div class="flex-item">
          <h1 class="content-slider-title"><a href="#">item-7</a></h1>
        </div>

        <div class="flex-item">
          <h1 class="content-slider-title"><a href="#">item-8</a></h1>
        </div>

      </div>
    </section>

    <section id="wrapper">
      <div class="content-slider-nav-btn nav-left"><i class="fa fa-arrow-left"></i></div>
      <div class="content-slider-nav-btn nav-right"><i class="fa fa-arrow-right"></i></div>

      <div class="flex">

        <div class="flex-item">
          <h1...

CSS

#wrapper {
  background: #f4f4f4;
  height: 250px;
  width: 100%;
  margin-top: 100px;
}

img {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.content-slider-nav-btn {
  position: absolute;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  margin-top: 100px;
  background: #333;
  color: #fff;
  z-index: 1;
  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.4), 1px 0 1px rgba(0, 0, 0, 0.4);
}

.content-slider-nav-btn:hover {
  background: #000;
  cursor: pointer;
  transform: scale(1.0);
  transition: 500ms ease;
}

.content-slider-nav-btn:active {
  background: transparent;
  cursor: pointer;
  transform: scale(1.1);
  transition: 500ms ease;
  /* box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.2), 1px 2px 10px 2px rgba(0, 0, 0, 0.2); */
}

.content-slider-nav-btn i {
  margin-top: 13px;
  margin-left: 15px;
  font-size: 17px;
}

.nav-left {
  left: 10px;
  display: none;
}

.nav-right {
  right: 10px;
}

.flex {
  max-height: 300px;
  width: 95%;
  background: #fafafa;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  box-shadow: inset 0 0px 1px 0px rgba(0, 0, 0, 0.4), inset 0 0px 1px 0px rgba(0, 0, 0, 0.2);
}

.flex-item {
  position: relative;
  min-height: 200px;
  min-width: 210px;
  max-height: 230px;
  max-width: 220px;
  background: #ddd;
  margin-right: 10px;
  box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.1), 1px 0 1px rgba(0, 0, 0, 0.1);
  /* transition-duration: 800ms; */
  transition-timing-function: ease-out;
}

.flex-item:last-child {
  margin-right: 0;
}

JavaScript

// FIXME: Add back in your window.onload function JS Fiddle already holds that wrapper and is not executing due to it being called in twice.

/*     window.onload = function() {
 */
//CAROUSEL
let leftSlideBtn = document.querySelectorAll('.nav-left');
let rightSlideBtn = document.querySelectorAll('.nav-right');
let flexElements = document.querySelectorAll('.flex');
let itemPos = [];
let duration = 800;


////////////////////////////////////SLIDE FORWARD////////////////////////////////
for (let i = 0; i < rightSlideBtn.length; i++) {
  /* 
  Instead of dealing with global vars which are more than not warned against,
  It comes out better to just pass in your variables.
  Reason for the functions is to keep the context of this scope technically global,
  and pass in/through the variables cleanly.
   */
  rightSlideBtn[i].addEventListener('click', function() {
    F_slideHandlers(flexElements[i], i)
  });

  // NOTE: Commented out the remove event listener from the code below, never resuscribes although it happens only on first pull.
  rightSlideBtn[i].addEventListener('mousedown', function() {
    F_TransitionError(flexElements[i], i)
  });
  /* 
  Using an array to handle your positioning, because there could be multiple elements and each should have their own thought
  on what their position is. The manner in which you were seeking to solve this would
   require counters, and arithmetic to keep within just one variable. 
   
   // NOTE: !!!! This is more than likely the main change that you'd have to make to your initial implementation, but everything else comes in as heavy, personal, recommendations.
   */
  itemPos.push(0)
}


function F_slideHandlers(flex, idx) {
  let totalFlexItemWidth = flex.children[1].offsetLeft - flex.children[0].offsetLeft;
  let F_overflowedWidth = flex.scrollWidth - flex.offsetWidth;

  F_slide(flex, totalFlexItemWidth, F_overflowedWidth, idx);
  // NOTE: Why are these two functions needed? Adding and removing event listeners
 ...