Carousel

[distant thicket]

Is there any prop to move the indicators at the bottom like below the cards like the image i provided @rocky vortex

[rocky vortex]

no, you will need to use styles API, probably targetting either indicators or indicator class
https://mantine.dev/others/carousel/#indicator-styles

i do not know how to do it

[neat oxide]

as Charlie mentioned you can use styles API
something like this:

styles={{
        indicators: {
          bottom: -20,
        }
      }}

[distant thicket]

Thank you dear

[distant thicket]

do we have to change the white color to any other color using styles API or by applying styles to a particular class?

@neat oxide

[rocky vortex]

styles API, indicator

[distant thicket]

autoplay does not seem to work what could be reason i have installed embla and all the requir thing like setting the autoplay duration @neat oxide @rocky vortex

[rocky vortex]

have you refreshed the page? autoplay can stop if your mouse enters the carousel

[distant thicket]

yes i have tried solutions like

like thsi solution worked for me in modal carousel

import Autoplay from 'embla-carousel-autoplay' const autoplay = useRef(Autoplay({ delay: 2000 }))

when i import by default then it imports from another file not like the one mentioned in mantine

when i try this one then this bug gets produced

failed to resolve import

but this file does export Autoplay

[neat oxide]

change the import to:

import Autoplay from "embla-carousel-autoplay";

[distant thicket]

i have created th sandbox but it is working fine over there 😦

https://codesandbox.io/s/carousel-check-f8m92m

[distant thicket]

tried both

@neat oxide package.json

ok so it was the packages incompatibility issue. THanks for suggestions

[distant thicket]

I'm using carouse and i have a minimum height ot carousel say 250px and given 100% height to its childs so that if one item has more height it will result in the increase in the height of the carousel and that as all items are given 100% height so they will also have the same height. but as child and parent has the same height i run into a tradeoff that is i cannot apply shadow on the paper component. It is applied but as there is no extra space i cannot see shadow around. when i scale this paper on hover i can see the shadow. which is having 100% height inside carousel slide (so paper takes 100% height of carousel) @long axle can you suggest me anything regarding this

caousel is having 250px height minimum

[distant thicket]

@rocky vortex

[rocky vortex]

i don't understand your explanation of the problem

[distant thicket]

Ok let me try again. I have a carousel component and it has minHeight of 25opx and all its childs are having 100% height. If any child's height is increased due to more content => it will also increase the height of carousel but as all the childs are having 100% all of them will have equal height which which is imp for Good UIl

but when any try to give boxshadow to any of them of shadow property of paper it does not get applied properly on y axis because of no space to spread

as child are taking 100% height

that result in something like this

but when i scale any child on hover i am able to see the shadow taht is what i want without even scaling it on y axis

i have also given padding to carousel that is why you are seeing the extra space

I am creating a sandbox are you available

@rocky vortex

[rocky vortex]

i think you may need to save some files

so is the issue that the top of the shadow is hidden due to the height?

[distant thicket]

yes

[rocky vortex]

you could add some padding

[distant thicket]

child and parent have same it is my need to have same height to all childs so that they look equal in height

[distant thicket]

have already added to the parent see

[rocky vortex]

add it to Carousel.Slide

p="xs" or pt

[distant thicket]

oh God i spent three hours on this 🙂 dead