react-material-ui-carousel - Navigation buttons outside the image content

Question

I'm trying to implement a carousel with React using the react-material-ui-carousel library. I want the next and previous navigation buttons to appear outside the images something like this. The docs for that library suggest customization is possible by overriding the navButtonsWrapperProps attribute of the Carousel component. But I still cannot get the nav buttons out of the image. Any help is appreciated. Thanks!

Answer 1

I stumbled upon the same problem not too long ago. I solved the problem by making the Carousel component's width larger than the carousel item itself. That way the navigation button will come outside of the item as it's item will have less width thatn its parent. Just make sure to align the Carousel and its item to center.

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

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

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

I don't think my solution is optimal but it's a quick fix for the given issue.

Answer 2

I know its to late but I have faced same problem. This answer can help someone.

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

You can control carousel next/previous from outside button click using useRef

const sliderRef = useRef(null);

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

Then you can use onClick event on any Button

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

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

It Works great for me