Построение карусели с реагирующими крючками с использованием карты. Можно ли добавить изображения влево, используя перевод X? - PullRequest
Новая
       41

Построение карусели с реагирующими крючками с использованием карты. Можно ли добавить изображения влево, используя перевод X?

0 голосов
/ 13 апреля 2020

Итак, я создаю карусель изображений с использованием реакции. Мне удалось добавить бесконечный контент, когда пользователь щелкает вправо, используя оператор распространения, чтобы увеличить массив, а затем с помощью translate X. У меня проблемы с генерацией графического контента при щелчке левой кнопкой мыши.

Возможно ли это сделать с помощью логики c Я использую или мне нужно go об этом по-другому?

Вот мой компонент 

const Carousel = () => {
let [position, setPosition] = useState(0)
const [count, setCount] = useState(['expand'])
let slideRef = useRef()

useEffect(() => {
  slideRef.current.style.transform = `translateX(${position}rem)`
}, [position]);


const handleCarousel = async(direction) => {

await setCount([...count, 'expand'])
direction === 'left' ? setPosition(position += 100) : setPosition(position -= 100) 
slideRef.current.style.transition = `transform 3s`

}
return (
 <Fragment>
  <button onClick={() => handleCarousel('left')}>Left</button>
  <button onClick={() => handleCarousel('right')}>Right</button>
  <div className="carousel-container">
  <div className="slider">
    <div className="slide" ref={slideRef}>
      {
        count.map((item, index) => {
          return (
            <Fragment key={index}>
              <Slide />
              <Slide />
              <Slide />

            </Fragment>

          )
        })
      }


    </div>

  </div>
</div>

</Fragment>

  )
}

Слайд - это просто еще один компонент со списком изображений. Это стили в горизонтальной строке со скрытым переполнением, поэтому они работают, как и ожидалось, при нажатии кнопки «Вправо».

Заранее спасибо.

...