0

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?

halfer
  • 19,824
  • 17
  • 99
  • 186
John Beasley
  • 2,577
  • 9
  • 43
  • 89
  • Could you add a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? – 0xts Aug 04 '23 at 05:10
  • Note that we prefer a technical style of writing here. We gently discourage greetings, hope-you-can-helps, thanks, advance thanks, notes of appreciation, regards, kind regards, signatures, please-can-you-helps, chatty material and abbreviated txtspk, pleading, how long you've been stuck, voting advice, meta commentary, etc. Just explain your problem, and show what you've tried, what you expected, and what actually happened. – halfer Aug 20 '23 at 18:02

1 Answers1

1

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.

0xts
  • 2,411
  • 8
  • 16