Navigate through item list

by Stanly Pokrowsky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.min.js"></script>
<div class="container">
  <div class="items">
    <div class="item">Товар 1</div>
    <div class="item">Товар 2</div>
    <div class="item">Товар 3</div>
    <div class="item">Товар 4</div>
    <div class="item">Товар 5</div>
    <div class="item">Товар 6</div>
    <div class="item">Товар 7</div>
    <div class="item">Товар 8</div>
    <!-- и так далее... -->
  </div>
</div>

<button class="prev">Prev</button>
<button class="next">Next</button>

CSS

.container {
  width: 100%; 
  overflow: hidden;
}

.items {
  display: flex;
  transition: transform 0.5s ease;
}

.item {
  width: 20%; /* Показать 5 товаров на экране */
  margin-right: 10px;
}

JavaScript

$(document).ready(function() {
  let currentIndex = 0;
  const itemsToShow = 5;
  const $items = $('.items');
  const $allItems = $('.item');
  const totalItems = $allItems.length;

  // Функция для обновления сдвига
  function updateItemsPosition() {
    $items.css('transform', 'translateX(' + (-currentIndex * 20) + '%)');
  }

  // Кнопка Prev
  $('.prev').click(function() {
    if (currentIndex > 0) {
      currentIndex--;
      updateItemsPosition();
    }
  });

  // Кнопка Next
  $('.next').click(function() {
    if (currentIndex < totalItems - itemsToShow) {
      currentIndex++;
      updateItemsPosition();
    }
  });
});