nuka-carousel

nuka-carousel copied to clipboard

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

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