I have prepared a multi-element slider that has no functionality yet. Its task is to move the elements by the number of visible elements on the screen. Unfortunately, I have to use js for this, react is out of the question. I should use also redux with UseState from another file. Problem is I don't know how it should works in JS.

JS

import React from 'react';
 
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 = () => {
  return (
    <div className={styles.root}>
      <div className='container'>
        <div className='row'>
          <div className={styles.thumbnailNavigationWrapper}>
            <Button className={styles.arrow} variant='small'>
              <FontAwesomeIcon icon={faAngleLeft}>Left</FontAwesomeIcon>
            </Button>
            <div className={styles.thumbnailMenu}>
              <ul>
                <li>
                  <a href='#' className={styles.activeThumbnail}>
                    <img src='/images/brands/brands-1.jpg' alt='brand'></img>
                  </a>
                </li>
                <li>
                  <a href='#'>
                    <img src='/images/brands/brands-2.jpg' alt='brands'></img>
                  </a>
                </li>
                <li>
                  <a href='#'>
                    <img src='/images/brands/brands-3.jpg' alt='brands'></img>
                  </a>
                </li>
                <li>
                  <a href='#'>
                    <img src='/images/brands/brands-4.jpg' alt='brands'></img>
                  </a>
                </li>
                <li>
                  <a href='#'>
                    <img src='/images/brands/brands-5.jpg' alt='brands'></img>
                  </a>
                </li>
                <li>
                  <a href='#'>
                    <img src='/images/brands/brands-6.jpg' alt='brands'></img>
                  </a>
                </li>
              </ul>
            </div>
            <Button className={styles.arrow} variant='small'>
              <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;
          }
        }
      }
    }
  }
}

CodePudding user response：

Since all your list elements have the same width of 150px, you could create a state/variable (e. g. activeIndex) with the active list element index. When sliding, change the index ( /- 1) and give the slider a dynamic style attribute with a translateX(calc(activeIndex * 150px)) or something like this.

Does this help?

CodePudding user response：

I'm trying to do something like that

const allBrands = useSelector(getAllBrands);
  const [activeBrands, setActiveBrands] = useState('');

  const rightSlide = e => {
    e.preventDefault();
    setTimeout(() => {
      setActiveBrands(activeBrands);
    }, 500);
  };