Отключить стрелку карусели с помощью React Hooks - PullRequest
Новая
       7

Отключить стрелку карусели с помощью React Hooks

0 голосов
/ 04 августа 2020

Используя react-material-ui-carousel, я пытаюсь отключить кнопки следующей и / или предыдущей карусели, когда пользователь достиг конца или начала карусели с помощью хуков.

Итак На данный момент у меня есть настройка хуков, но я не уверен, как реализовать logi c для отключения кнопок.

Кажется, что в документах выше нет прямого API для этого, но я решил, что это должно быть возможно, переключая видимость класса с помощью крючка на основе текущего элемента карусели.

Как я могу go достичь этого при моей текущей настройке? 

const [nextControl, disableNextControl] = useState(false);
const [prevControl, disablePrevControl] = useState(false);
const { animationType, setAutoplay } = block.attributes;
const lastSlideShowElement = block.attributes.items.length - 1;
const endOfShow = next => {
    if (next === lastSlideShowElement) {
        console.log(next, lastSlideShowElement);
    }
};
const startOfShow = prev => {
    console.log(prev);
};
return (
    <div className={classes.carouselWrapper}>
        <Carousel
            next={(next, active) => endOfShow(next)}
            prev={(prev, active) => startOfShow(prev)}
            animation={animationType}
            autoPlay={setAutoplay}
            navButtonsAlwaysVisible={true}
            fullHeightHover={true}
            className={classes.carousel}
        >
            {block.attributes.items.map((item, i) => (
                <div className={classes.card} key={i}>
                    <img src={item.url} alt={item.header} />
                    <h3>{item.header}</h3>
                </div>
            ))}
        </Carousel>
    </div>
);
...