auto-height.mdx

title	description	order	date
Auto Height	Learn how to use the Auto Height plugin for Embla Carousel	2	2022-01-14

import { Tabs } from 'components/Tabs/Tabs' import { TabsItem } from 'components/Tabs/TabsItem' import { TABS_PACKAGE_MANAGER } from 'consts/tabs' import { AutoHeight } from 'components/Examples/Plugins/AutoHeight'

Auto Height

View plugin on GitHub

This plugin is used to extend Embla Carousel with auto height functionality. It changes the height of the carousel container to fit the height of the highest slide in view.

---

Example

Installation

First you need to install the npm package and save it to your dependencies:

```html
<script src="https://unpkg.com/embla-carousel-auto-height/embla-carousel-auto-height.umd.js"></script>
```

```shell
npm install embla-carousel-auto-height --save
```

```shell
yarn add embla-carousel-auto-height
```

You can make use of CSS transitions to transition height changes. But beware: Transitioning height triggers reflow and may cause a performance hit.

.embla__container {
  transition: height 0.2s;
}

If you've been following along with any of the guides in the get started section, you want to make sure that each slide height is determined by the content it holds. Add the following to your CSS to achieve this:

.embla__container {
  display: flex;
  align-items: flex-start; /* Add this */
}