How to create ant design carousel with dots in react js?

Solution

To create ant design carousel with dots in react js, first install ant design library using npm install antd command import Carousel component from it. You have to create dots button in Carousel by css style .slick-dots li button.

Snippet

In this snippet, see the short example to create dots button in Carousel by css style .slick-dots li button in width: 6px !important;, height: 6px !important;, border-radius: 100% !important; giving makes dots button

.slick-dots li button {
  width: 6px !important;
  height: 6px !important;
  border-radius: 100% !important;
}

Example

In this example, we will import the Carousel component from the ant library. autoplay in carousel is used for automatic sliding. The contentstyle defines what is given inside the style properties, such as height: '160px', color: '#fff', lineHeight: '160px' , textAlign: 'center', background: '#364d79'.

Let’s start coding…

App.js

import { Carousel } from 'antd';
import "./App.css"

const contentStyle = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};
const App = () => (
  <Carousel autoplay>
    <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>
);
export default App;

.slick-dots li button {
  width: 6px !important;
  height: 6px !important;
  border-radius: 100% !important;
}

Output

Links

Here, we are provided code sandbox links for the above program to create ant design carousel with dots. Then you can use whenever you went and do the changes as per your requirements

codesandbox

Happy Coding,

I hope the above example with help you to do your task.