react-material-ui-carousel — Кнопки навигации вне содержимого изображения

Question

Я пытаюсь реализовать карусель с React , используя библиотеку react-material-ui-carousel . Я хочу, чтобы следующая и предыдущая кнопки навигации отображались за пределами изображений примерно так . Документы для этой библиотеки предполагают, что настройка возможна путем переопределения атрибута navButtonsWrapperProps компонента Carousel. Но я все еще не могу вывести кнопки навигации из изображения. Любая помощь приветствуется. Спасибо!

Answer 1

Я знаю, что уже поздно, но я столкнулся с той же проблемой. Этот ответ может помочь кому-то.

      import React, { useRef } from 'react';
import Carousel from 'react-material-ui-carousel'; // Carousel library

Вы можете управлять каруселью следующим/предыдущим нажатием внешней кнопки, используя useRef

      const sliderRef = useRef(null);

<Carousel
ref={ sliderRef }
>
<div>1</div>
<div>2</div>
<div>3</div>
</Carousel>

Затем вы можете использовать событие onClick для любой кнопки

      const handlePrevSlide = (e) => {
    e.preventDefault();
    if(sliderRef?.current){
        sliderRef.current.prev();
    }
}

const handleNextSlide = (e) => {
    e.preventDefault();
    if(sliderRef?.current){
        sliderRef.current.next();
    }
}

Это отлично работает для меня

Answer 2

Столкнулся с такой же проблемой не так давно. Я решил проблему, сделав ширину компонента карусели больше, чем сам элемент карусели. Таким образом, кнопка навигации выйдет за пределы элемента, поскольку его элемент будет иметь меньшую ширину, чем его родитель. Просто убедитесь, что карусель и ее элемент выровнены по центру.

      <Carousel className={styles.carousel}>
    <Item className={styles.item} />
</Carousel>

// Inside your css
.carousel{
width: 1200px;
margin: 0 auto;
}

.item{
width: 1000px;
margin: 0 auto;
}

Я не думаю, что мое решение оптимально, но это быстрое решение данной проблемы.