JSFiddle - React, Tailwind, and code Playground

by Stanly Pokrowsky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Адаптивная карусель логотипов</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .carousel-container {
      overflow: hidden;
      width: 100%;
    }

    .carousel-track {
      display: flex;
      transition: transform 0.5s ease;
    }

    .carousel-item-custom {
      flex: 0 0 auto;
      aspect-ratio: 1 / 1;
      background-color: #ddd;
      border: 2px solid #aaa;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
      color: #555;
    }
  </style>
</head>
<body>

<div class="container my-5">
  <div class="carousel-container border rounded">
    <div class="carousel-track" id="carouselTrack">
      <div class="carousel-item-custom bg-primary">1</div>
      <div class="carousel-item-custom bg-success">2</div>
      <div class="carousel-item-custom bg-warning">3</div>
      <div class="carousel-item-custom bg-danger">4</div>
      <div class="carousel-item-custom bg-info">5</div>
      <div class="carousel-item-custom bg-secondary">6</div>
      <div class="carousel-item-custom bg-dark">7</div>
    </div>
  </div>
</div>

<script>
  function getItemsToShowProject() {
    if (window.matchMedia('(max-width: 767px)').matches) {
      return 1;
    } else if (window.matchMedia('(max-width: 1023px)').matches) {
      return 2;
    } else {
      return 4;
    }
  }

  $(document).ready(function () {
    const $track = $('#carouselTrack');
    const $items = $track.children();
    let position = 0;
    let direction = 1;

    function updateItemWidths() {
      const visibleItems = getItemsToShowProject();
     ...