JSFiddle - React, Tailwind, and code Playground

by Nikita Titorovich

HTML

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div class="container">
  <div class="carousel" data-carousel="carousel">
    <div class="carousel__heading">
      <div class="carousel__name">
        <h2>Карусель</h2>
      </div>
      <div class="carousel__btns">
        <a href="#" data-carousel="prev">Влево</a>
        <a href="#" data-carousel="next">Вправо</a>
      </div>
    </div>
    <div class="carousel__container" data-carousel="container">
      <a href="#" class="carousel__item" tabindex="-1">
        sdafasf
      </a>
      <a href="#" class="carousel__item" tabindex="-1">
        sdafasf
      </a>
      <a href="#" class="carousel__item" tabindex="-1">
        sdafasf
      </a>
      <a href="#" class="carousel__item" tabindex="-1">
        sdafasf
      </a>
      <a href="#" class="carousel__item" tabindex="-1">
        sdafasf
      </a>
      <a href="#" class="carousel__item" tabindex="-1">
        sdafasf
      </a>
      <a href="#" class="carousel__item" tabindex="-1">
        sdafasf
      </a>
      <a href="#" class="carousel__item" tabindex="-1">
        sdafasf
      </a>
      <a href="#" class="carousel__item" tabindex="-1">
        sdafasf
      </a>
      <a href="#" class="carousel__item" tabindex="-1">
        sdafasf
      </a>
    </div>
  </div>
</div>
</body>
</html>

SCSS

* {
  box-sizing: border-box;
}

body {
  background-color: white;
}

.container {
  width: 900px;
  margin: 0 auto;
}

.carousel {
  overflow: hidden;
  &__heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
  &__container {
    display: flex;
    transition: 500ms ease;
  }
  &__item {
    padding: 20px;
    width: 25%;
    height: 300px;
    flex-shrink: 0;
    &:nth-child(odd) {
      background: #d8d8d8;
    }
  }
}

JavaScript

const carousel = document.querySelector("[data-carousel='carousel']");
const container = carousel.querySelector("[data-carousel='container']");
const prevBtn = carousel.querySelector("[data-carousel='prev']");
const nextBtn = carousel.querySelector("[data-carousel='next']");

const items = container.children;
const itemWidth = items[0].offsetWidth;
const itemLength = items.length;
const containerWidth = container.offsetWidth;
const columnCount = Math.floor(containerWidth / itemWidth);

let currentPos = 0;
let count = 0;

for (let i = 0; i < columnCount; i++) {
	items[i].setAttribute("tabindex", 0);
}

nextBtn.addEventListener("click", next, false);
prevBtn.addEventListener("click", prev, false);

function next() {
	if (!container.classList.contains("animate")) {
    if (count < itemLength - columnCount) {
      container.style.transform = "translateX(" + (currentPos - itemWidth) + "px)";
      currentPos -= itemWidth;
      count++;
      container.classList.add("animate");
      container.addEventListener("transitionend", animationEnd, false);
    } else {
      container.style.transform = "translateX(0px)";
      currentPos = 0;
      count = 0;
      container.classList.add("animate");
      container.addEventListener("transitionend", animationEnd, false);
    }
  }
}

function prev() {
	if (!container.classList.contains("animate")) {
    if (count !== 0) {
      container.style.transform = "translateX(" + (currentPos + itemWidth) + "px)";
      currentPos += itemWidth;
      count--;
			container.classList.add("animate");
      container.addEventListener("transitionend", animationEnd, false);
    }
  }
}

function animationEnd() {
	this.classList.remove("animate");
  this.removeEventListener("transitionend", animationEnd, false);
}

// setInterval(next, 2000);


console.log(columnCount);