JSFiddle - React, Tailwind, and code Playground

HTML

<div id="carousel" class="carousel">
  <button class="arrow prev">
    <</button>
      <div class="gallery">
        <ul class="images">
          <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li>
          <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li>
          <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li>
          <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li>
          <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li>
          <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li>
        </ul>
      </div>
      <button class="arrow next">></button>
</div>

CSS

body {
  padding: 10px;
}

.carousel {
  position: relative;
  width: 398px;
  padding: 10px 40px;
  background: #eee;
}

.carousel img {
  width: 130px;
  height: 130px;
  margin-right: 2px;
  display: block;
}

.arrow {
  position: absolute;
  top: 60px;
  padding: 0;
  font-size: 24px;
  line-height: 24px;
  color: #444;
  display: block;
}

.arrow:focus {
  outline: none;
}

.arrow:hover {
  background: #ccc;
  cursor: pointer;
}

.prev {
  left: 7px;
}

.next {
  right: 7px;
}

.gallery {
  width: 415px;
  overflow: hidden;
}

.gallery ul {
  height: 130px;
  width: 9999px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: margin-left 250ms;
  font-size: 0;
}

.gallery li {
  display: inline-block;
}

.faded {
  opacity: 0.5;
}

JavaScript

var width = 130;

var carousel = document.getElementById('carousel');
var list = carousel.querySelector('ul');
var listItems = document.querySelectorAll('li')

var position = 0;

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();

  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
  );
}

carousel.querySelector('.prev').onclick = function() {
  position = Math.min(position + width, 0)
  console.log(position)
  list.style.marginLeft = position + 'px';

  for (var i = 0; i < listItems.length; i++) {
    if (isElementInViewport(listItems[i])) {
      if (listItems[i - 1]) {
        listItems[i - 1].classList.remove('faded');
      }
    } else {
      if (listItems[i - 1]) {
        listItems[i - 1].classList.add('faded');
      }
    }
  }

};

carousel.querySelector('.next').onclick = function() {
  position = position - width
  console.log(position)
  list.style.marginLeft = position + 'px';

  for (var i = 0; i < listItems.length; i++) {
    if (isElementInViewport(listItems[i])) {
      console.log(listItems[i])
      if (listItems[i + 1]) {
        listItems[i].classList.remove('faded')
      }
    } else {
      listItems[i].classList.add('faded')
    }
  }

};