Search code examples
reactjstypescripttailwind-cssimage-slider

React Alice Carousel - move dot controls over images in slider

Using react-alice-carousel, I am trying to move the dot controllers to be located near the bottom of the images on the slider.

Currently, here is the location of the dot controllers:

enter image description here

Not the best picture, but the image is some sand, along with other beach slides.

I want to move the dots so that they are on the actual slider near the bottom of the images.

Just in case, here is an example of what I'm trying to achieve:

https://www.elegantthemes.com/blog/divi-resources/how-to-enable-dot-navigation-on-your-divis-video-slider-module

I am currently using reactjs and typescript, along with Tailwind.css

Here is my index.tsx code:

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

As of right now, the slider is functioning properly using the above code. I am still fairly new to react, and this is my first time using Alice-Carousel.

How can I move the dot controllers up?

Solution

  • You can make use of CSS classes available for react-alice-crousel, more specifically, you can use .alice-carousel__dots class like so -

    div.alice-carousel > ul.alice-carousel__dots {
  position: absolute;
  margin: 0;
  padding: 0;
  bottom: 5px;
  left: 50%;
}

    Here's a CodeSandbox.