Carousel Active/Inactive (current) slide identification

[daring isle]

I am trying to set the opacity of the slides not currently in focus but from what I can see the root functionality in Embla that allows for identification (and styling) of the active and inactive slides through data attributes doesn't appear to be present in Mantine.

I can't see any way to differentiate the Slide in the styles object through classes or data-attributes (and :not()).

Is there a way to achieve this in Mantine Carousel (along the lines of the data-active="true" attribute applied to the Indicator)?

[daring isle]

Nevermind... figured it out with ClassNames plugin 🙂

[daring isle]

// as is-selected is the default value for the ClassNames selected option there is no need to specify it here
const classnames = useRef(ClassNames());
<Carousel styles={{
            slide: {
              opacity: '100%',
              transition: 'opacity .5s',
              '&:not(.is-selected)': {
                opacity: '25%',
              },
            },
          }}
>```