[Feat]: Allow AutoHeight plugin to do auto width when using y axis

[christopherpickering]

Which variants of Embla Carousel are relevant to this feature request?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Feature description

When using the Y axis it would be cool to let the carousel do auto width using the auto height plugin.

Additional Context

Additional details here...

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for feature requests

[christopherpickering]

Here's a modification of th auto height plugin that works for width:

import type {
	CreatePluginType,
	EmblaCarouselType,
	EmblaEventType,
} from "embla-carousel";
import type { OptionsType } from "./Options";

declare module "embla-carousel" {
	interface EmblaPluginsType {
		AutoWidth: AutoWidthType;
	}
}

export type AutoWidthType = CreatePluginType<{}, OptionsType>;

export type AutoWidthOptionsType = AutoWidthType["options"];

function AutoWidth(userOptions: AutoWidthOptionsType = {}): AutoWidthType {
	let emblaApi: EmblaCarouselType;
	let slideWidths: number[] = [];
	const widthEvents: EmblaEventType[] = ["select", "slideFocus"];

	function init(emblaApiInstance: EmblaCarouselType): void {
		emblaApi = emblaApiInstance;

		const {
			options: { axis },
			slideRects,
		} = emblaApi.internalEngine();

		if (axis === "x") return;

		slideWidths = slideRects.map((slideRect) => slideRect.width);

		widthEvents.forEach((evt) => emblaApi.on(evt, setContainerWidth));
		setContainerWidth();
	}

	function destroy(): void {
		widthEvents.forEach((evt) => emblaApi.off(evt, setContainerWidth));
		const container = emblaApi.containerNode();
		container.style.width = "";
		if (!container.getAttribute("style")) container.removeAttribute("style");
	}

	function widestInView(): number | null {
		const { slideRegistry } = emblaApi.internalEngine();
		const selectedIndexes = slideRegistry[emblaApi.selectedScrollSnap()];

		if (!selectedIndexes) return null;

		return selectedIndexes
			.map((index) => slideWidths[index])
			.reduce((a, b) => Math.max(a, b), 0);
	}

	function setContainerWidth(): void {
		const width = widestInView();
    console.log("width", width)
		if (width === null) return;

		emblaApi.containerNode().style.width = `${widestInView()}px`;
	}

	const self: AutoWidthType = {
		name: "AutoWidth",
		options: userOptions,
		init,
		destroy,
	};
	return self;
}

declare namespace AutoWidth {
	let globalOptions: AutoWidthOptionsType | undefined;
}

AutoWidth.globalOptions = undefined;

export default AutoWidth;

The css of the embla__slide should have width:max-content; added, and a width transition can be added to embla__container.

[davidjerleke]

@christopherpickering thank you for your feature suggestion. It's quite easy to adapt the auto height plugin to support width too. but I'm curious: What's the use case for this? I can't think of a use case so would you mind sharing a use case?