JSFiddle - React, Tailwind, and code Playground

HTML

<div class="carousel">
  <ul>
    <li class="prev"><</li>
    <li class="carousel__item"><img src="" alt=""/></li>
    <li class="carousel__item"><img src="" alt=""/></li>
    <li class="carousel__item"><img src="" alt=""/></li>
    <li class="next">></li>
  </ul>
</div>

CSS

.carousel
  margin-left: 100px
  @media screen and (max-width: 1024px)
    margin-left: 25px
  @media screen and (max-width: 768px)
    margin-left: 0

  .carousel__item
    float: left
    list-style-type: none
    width: 300px
    height: 300px
    border: 4px solid #efefef
    text-align: center
    vertical-align: middle
    margin: 0 10px
    cursor: pointer
    @media screen and (max-width: 1024px)
      width: 200px
      height: 200px
    @media screen and (max-width: 768px)
      width: 150px
      height: 150px

    img
      margin-top: 10%
      max-height: 250px
      max-width: 250px
      @media screen and (max-width: 1024px)
        max-height: 200px
        max-width: 200px
      @media screen and (max-width: 768px)
        max-height: 150px
        max-width: 150px

  .prev, .next
    float: left
    cursor: pointer
    list-style-type: none
    font-size: 200px
    margin-top: 45px
    &:hover
      color: #8aa9d2
    @media screen and (max-width: 1024px)
      font-size: 100px
      margin-top: 23px
    @media screen and (max-width: 768px)
      font-size: 70px
    @media screen and (max-width: 320px)
      float: none

  .prev
    @media screen and (max-width: 320px)
      margin-left: 66px
      transform: rotate(90deg)
      display: inline-block
  li.next
    @media screen and (max-width: 320px)
      clear: both
      transform: rotate(90deg)
      float: left
      margin-left: 66px
      margin-top: 0


  .prev
    margin-right: 40px
  .next
    margin-left: 40px

.carousel__big
  position: absolute
  z-index: 2
  display: inline-block
  transition: all .5s
  img
    max-width: 800px
    max-height: 800px
    padding: 10px
    border: 3px solid #d2a1b5
    border-radius: 10px
    cursor: pointer
    @media screen and (max-width: 768px)
      max-width: 600px
      max-height: 600px
    @media screen and (max-width: 320px)
      max-width: 250px
      max-height: 250px

JavaScript

import css from './header/header.scss';
import polyfill from 'babelify/polyfill';

// imports gallery images
import lolaboutdev from './images/lolaboutdev.jpg'
import youda from './images/youda.jpg'
import framework from './images/js frameworks.jpg'
import cheatsheet from './images/cheatsheet.png'
import aliparse from './images/aliparse.png'
import django from './images/django-logo-negative.png'
import extension from './images/extension.png'


document.body.addEventListener(`click`, handleClick);
document.body.addEventListener(`click`, handleClick);
document.body.addEventListener(`click`, showImage);
document.body.addEventListener(`click`, closeImg);


let imagesArr = [lolaboutdev, youda, framework, cheatsheet, aliparse, django, extension];
let [...carouselImg] = document.querySelectorAll(`.carousel__item img`);

function handleClick(e) {
  if (!(e.target.classList.contains(`next`) || e.target.classList.contains(`prev`))) return;

  if (e.target.classList.contains(`next`)) {
    let {start, stop} = findLastRight(imagesArr, carouselImg);
    let newImagesArr = getNextThreeImages(imagesArr, start, stop);
    pushImages(newImagesArr, carouselImg);
  } else {
    findFirstLeft(imagesArr, carouselImg);
    let {start, stop} = findFirstLeft(imagesArr, carouselImg);
    let newImagesArr = getPrevThreeImages(imagesArr, start, stop);
    pushImages(newImagesArr, carouselImg);
  }

}

function pushImages(images, lis) {
  for (let [index, item] of lis.entries()) {
    item.src = images[index];
  }
}

pushImages(imagesArr, carouselImg);

function findLastRight(images, carouselImg) {
  let lastRight = carouselImg[carouselImg.length - 1].src;
  lastRight = lastRight.replace(/http:\/\/localhost:8080/, ``);
  let lastIndexInImages = images.indexOf(lastRight) + 1;
  let newIndex = lastIndexInImages + 3;

  return {start: lastIndexInImages, stop: newIndex};
}

function findFirstLeft(images, carouselImg) {
  let firstLeft = carouselImg[0].src;
  firstLeft =...