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:

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

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

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 */}

Options

Below follows an exhaustive list of all Auto Height options and their default values.

destroyHeight

Type: CSSStyleDeclaration.height
Default: auto

Choose CSS height declaration that will be applied to the carousel container when the plugin is destroyed.