Slider wieloelementowy, jak sprawić aby zmieniał się o ilość elementów na ekranie

Question

Przygotowałem slider wieloelementowy, który nie posiada jeszcze funkcjonalności. Jego zadaniem jest przesuwaniem elementów o ilość widocznych elementów na ekranie. Niestety muszę użyć do tego js, react nie wchodzi w grę. 

JS

import React, { useState } from 'react';
import { useSelector } from 'react-redux';

import { getAllBrands } from '../../../redux/brandsRedux';

import styles from './Brands.module.scss';
import Button from '../../common/Button/Button';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';

const Brands = () => {
  const allBrands = useSelector(getAllBrands);
  const [activeBrands, setActiveBrands] = useState(0);

  const handleLeftSlide = e => {
    e.preventDefault();
    setActiveBrands(activeBrands - allBrands.length);
  };

  const handleRightSlide = e => {
    e.preventDefault();
    setActiveBrands(activeBrands + allBrands.length);
  };

  return (
    <div className={styles.root}>
      <div className='container'>
        <div className='row'>
          <div className={styles.thumbnailNavigationWrapper}>
            <Button
              className={styles.arrow}
              variant='small'
              onClick={e => handleLeftSlide(e)}
            >
              <FontAwesomeIcon icon={faAngleLeft}>Left</FontAwesomeIcon>
            </Button>
            {allBrands.map(item => (
              <div className={styles.thumbnailMenu} key={item.id}>
                <ul>
                  <li>
                    <a href='#' className={styles.activeThumbnail}>
                      <img src={item.image} alt='brands' />
                    </a>
                  </li>
                </ul>
              </div>
            ))}
            <Button
              className={styles.arrow}
              variant='small'
              onClick={e => handleRightSlide(e)}
            >
              <FontAwesomeIcon icon={faAngleRight}>Right</FontAwesomeIcon>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Brands;

SCSS

@import "../../../styles/settings.scss";

.root {
  padding: 2rem 0;
  display: flex;
  justify-content: center;

  .thumbnailNavigationWrapper {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 90px;
    border: 1px solid $new-furniture-border-color;

    .arrow {
      font-size: 20px;
      height: 70px;
      width: 30px;
      display: flex;
      align-items: center;
    }

    ul {
      position: relative;
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        width: 150px;
        height: 70px;
        margin: 10px;

        a {
          opacity: 0.5;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
}

Czy mógłby kto mi podpowiedzieć jak powinna wyglądać funkcjonalność?