CODEWITHSUNDEEP
reactjscarouselreact-material-ui-carousel
Ejil
Ejil

Reputation: 23

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

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!

Upvotes: 0

Views: 3363

Answers (2)

Balwinder
Balwinder

Reputation: 82

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();
    }
}

You can see I am using custom buttons to control next previous actions

It Works great for me

Upvotes: 1

Prabin Shrestha
Prabin Shrestha

Reputation: 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.

Upvotes: 0

Related Questions