Solution

To change height of ant design carousel in react js, first install ant design library using npm install antd command, import Carousel component from it. You have to use inline style style={{ backgroundColor: 'yellow', height: 400 }} to change height in Carousel.

Snippet

In this snippet, see the short example to use Carousel component of ant design library, with the use <div> element and <h3> with the style={{ height: 400 }} same hight Carousel should give.

  <Carousel>
    <div>
      <h3 style={{ backgroundColor: 'yellow', height: 400 }}>1</h3>
    </div>
    <div>
      <h3 style={{ backgroundColor: 'blue', height: 400 }}>2</h3>
    </div>
    <div>
      <h3 style={{ backgroundColor: 'black', height: 400 }}>3</h3>
    </div>
    <div>
      <h3 style={{ backgroundColor: 'red', height: 400 }}>4</h3>
    </div>
  </Carousel>

Example

In this example, we will import the Carousel component from the ant design library, with the use <div> element and <h3> with the style={{ height: 400 }} same hight Carousel should give.

Let’s start coding…

App.js

import { Carousel } from 'antd';

const App = () => (
  <Carousel>
    <div>
      <h3 style={{ backgroundColor: 'yellow', height: 400 }}>1</h3>
    </div>
    <div>
      <h3 style={{ backgroundColor: 'blue', height: 400 }}>2</h3>
    </div>
    <div>
      <h3 style={{ backgroundColor: 'black', height: 400 }}>3</h3>
    </div>
    <div>
      <h3 style={{ backgroundColor: 'red', height: 400 }}>4</h3>
    </div>
  </Carousel>
);
export default App;

Output

Ant-design, height

Here, we are provided code sandbox links for the above program to change height of ant design carousel. 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.