使用react-alice-carousel，我试图将点控制器移动到滑块上图像底部附近。
目前，这里是点控制器的位置：
x1c 0d1x的数据
不是最好的图片，但图像是一些沙子，沿着其他海滩幻灯片。
我想移动点，使他们在实际的滑块附近的图像底部。
为了以防万一，这里有一个我想要达到的目标的例子：
https://www.elegantthemes.com/blog/divi-resources/how-to-enable-dot-navigation-on-your-divis-video-slider-module
我目前正在使用reactjs和typescript，沿着Tailwind.css
下面是我的index.tsx代码：

import AliceCarousel from "react-alice-carousel";
import "react-alice-carousel/lib/alice-carousel.css";
import BannerOne from "@/assets/bannerOne.jpg";
import BannerTwo from "@/assets/bannerTwo.jpg";
import BannerThree from "@/assets/bannerThree.jpg";

type Props = {
  setSelectedPage: (value: SelectedPage ) => void;
  autoPlayInterval: number;
}

const Home = ({ setSelectedPage }: Props) => {
  const isAboveMediumScreens = useMediaQuery("(min-width:1060px)");
  return (
        <section
          id="home"
          className="gap-16 bg-gray-20 py-0 md:h-full md:pb-0"
        >
           <div
            className="md:flex mx-auto w-5/6 items-center justify-center md:h-5/6"
           > 
             <AliceCarousel autoPlay={true} infinite={true} disableButtonsControls autoPlayInterval={3000} autoPlayDirection="ltr">
               <img alt="Banner One" src={BannerOne} className="sliderimg md:flex mx-auto md:h-5/6" />
               <img alt="Banner Two" src={BannerTwo} className="sliderimg md:flex mx-auto md:h-5/6" />
               <img alt="Banner Three" src={BannerThree} className="sliderimg md:flex mx-auto md:h-5/6" />
             </AliceCarousel>
           </div>
        </section>
  )
}

export default Home

字符串
到目前为止，滑块使用上述代码正常运行。我仍然是相当新的React，这是我第一次使用爱丽丝旋转木马。
请帮我把点控制器上移。- 谢谢-谢谢