Auto Height

View plugin on GitHub

This plugin extends Embla Carousel with auto height functionality, automatically adjusting the carousel container’s height to match the tallest slide currently in view.

Example

Installation

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

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

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;}

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.

active

Type:boolean
Default: true

{ active: false | true }

Setting this to false will not activate or deactivate the plugin. Useful when used together with the breakpoints option to toggle the plugin active/inactive depending on media queries.

breakpoints

Type:AutoHeightOptionsType
Default: {}

{   active: false,  '(min-width: 768px)': { active: true }}

An object with options that will be applied for a given breakpoint by overriding the options at the root level.

Note: If multiple queries match, they will be merged. And when breakpoint options clash, the last one in the list has precedence.

heightEvent

Type:string
Default: select

{ heightEvent: 'select' | 'slidesinview' }

By default, the carousel container's height is adjusted based on the slides in the selected scroll snap. Set this option to 'slidesinview' to adjust the height dynamically according to all slides currently in view.

Edit this page on GitHub