CODEWITHSUNDEEP
javascripthtmlreactjscarouselantd
Anonymous
Anonymous

Reputation: 91

Ant Design Custom Carousel

**Ant Design Custom Carousel **

How to customize the ant design carousel with the following features

  1. Bullets instead of Boxes
  2. Change Bullet Color
  3. Bullets should be outside of the image container

Sandbox Link https://codesandbox.io/s/trusting-dream-zzjr7?file=/src/App.js

Upvotes: 0

Views: 4439

Answers (1)

Bjorne
Bjorne

Reputation: 1494

There are probably a couple of solutions for this, I will present two.

The first is simply to override the styles for the current buttons. I have tried this for different elements and it can sometimes be a bit frustrating but it is possible. The ul with the dots have classname slick-dots.

Another solution which I would recommend is to just create your own dots and remove the standard dots from the carousel. This can easily be achieved with useRef hook. To access the goTo function of the carousel.

const App = () => {
  const ref = useRef();

  const goTo = (slide) => {
    ref.current.goTo(slide, false);
  };

  return (
    <div>
      <Carousel ref={ref} afterChange={onChange} dots={false}>
        <div>
          <h3 style={contentStyle}>1</h3>
        </div>
        <div>
          <h3 style={contentStyle}>2</h3>
        </div>
        <div>
          <h3 style={contentStyle}>3</h3>
        </div>
        <div>
          <h3 style={contentStyle}>4</h3>
        </div>
      </Carousel>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <button onClick={() => goTo(0)} style={btnStyle} />
        <button onClick={() => goTo(1)} style={btnStyle} />
        <button onClick={() => goTo(2)} style={btnStyle} />
        <button onClick={() => goTo(3)} style={btnStyle} />
      </div>
    </div>
  );
};

https://codesandbox.io/s/amazing-beaver-4brfo?file=/src/App.js:499-1411

I just styled some simple bullets but you may style them in any fashion you like, please ask if you have any questions. Good luck :)

Upvotes: 3

Related Questions