Closed RaresTDumitrica closed 5 months ago
You can use a few different approaches via the defaultControlsConfig
prop to achieve what you want.
You can modify defaultControlsConfig.prevButtonText
and defaultControlsConfig.nextButtonText
like so to get a basic implementation:
https://codesandbox.io/s/admiring-lewin-zlwmj9?file=/src/App.js:376-453
If you want to use an image or change the font size, etc., the following are also available:
nextButtonClassName
nextButtonStyle
prevButtonClassName
prevButtonStyle
The properties you want to use for the left/right controls are: "renderCenterLeftControls" and "renderCenterRightControls". These allow you to create custom controls which could be images, svgs, or any HTML element. You can also customize the pagination controls in a similar manner using "renderBottomCenterControls".
@RaresTDumitrica you can do that by modifying the defaultControlsConfig
as specified by @fritz-c previously. But you can also add Icon component instead of string also. Here is the litlle code
import Carousel from "nuka-carousel" import NavigateNextIcon from '@mui/icons-material/NavigateNext' import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'
const defaultControlsConfig = {
nextButtonText : React.ReactNode = <NavigateNextIcon />,
prevButtonText: React.ReactNode = <ArrowBackIosNewIcon/>
}
<Carousel autoplay wrapAround defaultControlsConfig={defaultControlsConfig}> {Your images} </Carousel>
You can review my code where I have implemented that (in my nextjs application) here it is 👉 https://github.com/satyadalei/igit-mca-frontend/blob/main/src/components/hero/Carousel.jsx
Controls have been rewritten for V8 and are much more flexible now
I am trying to set an arrow icon as the symbol in the button instead of plain text in nuka-carousel V5, but it appears that there is no way to implement that