Функция выполняется лишь один раз
Хочу поменять изображение стрелки для слайдера когда он дойдет для конца, однако функции (leftArrow , rigtArrow) выполняются лишь раз. Как исправить ?
let [position, setPosition] = useState(-((noveltiesList.length / 2 - 1) * 350))
const styleFromTrack = {
transform: `translateX(${-((noveltiesList.length / 2 - 1) * 350)}px)`,
};
// прокрутка вправо
const prevHandler = () => {
if (position != 0) {
position += 350;
slider.current.childNodes.forEach((element) => {
element.style = `transform: translateX(${position + 'px'})`
})
}
};
// прокрутка влево
const nextHandler = () => {
if (position != -(noveltiesList.length - 3) * 350) {
position += -350;
slider.current.childNodes.forEach((element) => {
element.style = `transform: translateX(${position + 'px'})`
})
}
};
function leftArrow (){
if (position == 0){
return "../../../../img/arrows/arrowdisabled.svg" ;
}else{
return "../../../../img/arrows/arrow-2px-70.svg" ;
}
}
function rigtArrow (){
if (position == -(noveltiesList.length - 3) * 350){
return "../../../../img/arrows/arrowdisabled.svg" ;
}else{
return "../../../../img/arrows/arrow-2px-70.svg" ;
}
}
return (
<>
<div className="content">
<div className={style.body}>
<h2 className={style.title}>
<span className="orange-letter">Н</span>овинки
</h2>
<div className={style.slider}>
<div className={style.slider__arrow}>
<button onClick={prevHandler} >
// стрелка
<img src={leftArrow()} alt="" />
</button>
</div>
<div className={style.slider__track} ref={slider} >
// блоки
</div>
<div className={style.slider__arrow}>
<button onClick={nextHandler}>
// стрелка
<img src={rigtArrow()} alt="" />
</button>
</div>
</div>
<div className={style.button}>
<ButtonGoToCacalog />
</div>
</div>
</div>
</>