How to fix the position of React slick-carousel?

Question

I want to fix the position of react slick carousel,and want to change the navigation dots style.I am trying in this way....

dots style I want, Screenshot: https://i.stack.imgur.com/MhOQa.png

      `<Show above='md'>
            <Box w='50%'>
                <Slider {...settings} className='customSlide'>
                    <Box>
                        <Image
                            src={avtar}
                        />
                    </Box>
                    <Box>
                        <Image
                            src={avtar1}
                        />
                    </Box>
                    <Box>
                        <Image
                            src={avtar2}
                        />
                    </Box>
                    <Box>
                        <Image
                            src={avtar3}
                        />
                    </Box>
                </Slider>
            </Box>
            <Divider orientation='vertical' variant={'dashed'} borderColor={'grey'} height='100vh' />
        </Show>

`

CSS:

.customSlide{ position: fixed!important; }

Thanks in advance..