Блог

Я пытаюсь создать бесконечный слайдер с динамическим контентом. Я все исправил, но у меня есть одна проблема с переходом. Я думаю, что проблема связана с повторным отображением страницы, на которой было потеряно предыдущее местоположение. Я не знаю, как это исправить. У вас есть какие-нибудь предложения?

Прежде чем я сделал функцию перехода вне эффекта использования и вызвал ее в кнопке next/prev. Я заметил, что когда я нажимал, он всегда отставал на 1 клик, поэтому я ввел код в эффект использования.

Код

 export default function Slider({}) { const dataArray = [  { text: '1' },  { text: '2' },  { text: '3' },  { text: '4' },  { text: '5' },  { text: '6' }, ];  const [transitionArray, setTransitionArray] = useState([]);  //gives all the data a number and puts it in the array const [orderArray, setOrderArray] = useState(() =gt; {  const initialState = [];  dataArray.forEach((x, index) =gt; {  initialState.push(index);  });  return initialState; });  const [positionArray, setPositionArray] = useState(() =gt; {  const initialState = [];  orderArray.forEach((x) =gt; {  x === dataArray.length - 1  ? (x = 1)  : x === dataArray.length - 2  ? (x = 0)  : (x = x   2);  initialState.push(x);  });  return initialState; });  const arrayLenght = dataArray.length;  useLayoutEffect(() =gt; {  console.log('orderArray '   orderArray);  console.log('positionArray '   positionArray);  console.log('transitionArray '   transitionArray); }, [orderArray, positionArray, transitionArray]);  useEffect(() =gt; {  const newPositionArray = [];  orderArray.forEach((x) =gt; {  x === arrayLenght - 1  ? (x = 1)  : x === arrayLenght - 2  ? (x = 0)  : (x = x   2);  newPositionArray.push(x);  });  setPositionArray(newPositionArray); }, [orderArray, arrayLenght]);  useEffect(() =gt; {  const newTransitionArray = [];  positionArray.forEach((x) =gt; {  x === 0 || x === arrayLenght - 1  ? (x = 'unset')  : (x = 'left 0.5s ease-in-out 0.5s');  newTransitionArray.push(x);  });  setTransitionArray(newTransitionArray); }, [positionArray, arrayLenght]);  const prev = () =gt; {  const newArray = orderArray.map((x) =gt;  x === dataArray.length - 1 ? (x = 0) : x   1  );  setOrderArray(newArray); };  const next = () =gt; {  const newArray = orderArray.map((x) =gt;  x === 0 ? (x = dataArray.length - 1) : x - 1  );   setOrderArray(newArray); };  let number = 120;  return (  lt;div className={styles.slider_section}gt;  lt;div className={styles.slider_container}gt;  lt;div className={styles.infinite_slider_nav}gt;  lt;FiArrowLeftCircle  size={45}  strokeWidth={0.6}  onClick={prev}  /gt;  lt;h3gt;Gallerylt;/h3gt;  lt;FiArrowRightCircle  size={45}  strokeWidth={0.6}  onClick={next}  /gt;  lt;/divgt;  lt;div  className={styles.slider_wrapper}  style={{  transform: `translateX(-${number}vw)`,  }}  gt;  {dataArray.map((data, index) =gt; {  return (  lt;div  key={Math.floor(Math.random() * 1000)   1}  className={styles.slider_item}  style={{  left: ` ${positionArray[index] * 70}vw`,  transition: `${transitionArray[index]}`,  }}  gt;  lt;h1gt;{data.text}lt;/h1gt;  lt;/divgt;  );  })}  lt;/divgt;  lt;/divgt;  lt;/divgt; );  

css

 .infinite_slider_wrapper {  position: relative;  display: flex;  justify-content: center;  width: 100vw;  height: 35vw;  gap: 5vw;  .infinite_slider_item {  position: absolute;  min-width: 60vw;  height: 30vw;  padding-top: 30vw;  display: flex;  justify-content: center;  align-items: center;  transition: left 0.5s;  } }