Applying Plugins Before Starting the Migration

[teleskop150750]

Summary

Consider initializing plugins before you begin the migration.

Example: fork

2025-02-17.22-55-46.mp4

In my example, I create a custom transition handling hook to sync the rows in the function comparison table.

Due to the fact that plugins are applied too late, the slider positions are out of sync at the time of creation.

declare module '@teleskop150750/embla-carousel/plugins' {
    interface EmblaPluginsType {
        table?: TableType
    }
}

export type OptionsType = CreateOptionsType<{
    row: string
}>

const defaultOptions: OptionsType = {
    active: true,
    breakpoints: {},
    row: '.embla__container',
}

export type TableType = CreatePluginType<{}, OptionsType>

export type TableOptionsType = TableType['options']

export function Table(userOptions: TableOptionsType = {}): TableType {
    function init(emblaApiInstance: EmblaCarouselType, optionsHandler: OptionsHandlerType): void {
        const { mergeOptions } = optionsHandler
        const allOptions = mergeOptions(defaultOptions, userOptions)
        const $root = emblaApiInstance.rootNode()

        const $rows = [...$root.querySelectorAll<HTMLElement>(allOptions.row)]

        const engine = emblaApiInstance.internalEngine()
        engine.translate = useTranslate(engine.axis, $rows)
    }

    function destroy(): void {}

    const self: TableType = {
        name: 'table',
        options: {},
        init,
        destroy,
    }
    return self
}

/**
 * Создает утилиту для трансляции заданной оси и контейнера.
 * @param axis - Тип оси ('x' или 'y').
 * @param container - Элемент контейнера, к которому применяется трансляция.
 * @returns Объект с утилитами для трансляции элемента контейнера.
 */
export function useTranslate(axis: AxisType, $containers: HTMLElement[]) {
    const translate = axis.scroll === 'x' ? x : y
    let disabled = false

    const styles: CSSStyleDeclaration[] = []

    for (const $container of $containers) {
        styles.push($container.style)
    }

    /**
     * Транслирует элемент контейнера по оси x на указанное значение.
     * @param n - Значение для трансляции.
     * @returns Значение CSS transform для трансляции.
     */
    function x(n: number): string {
        return `translate3d(${n}px,0px,0px)`
    }

    /**
     * Транслирует элемент контейнера по оси y на указанное значение.
     * @param n - Значение для трансляции.
     * @returns Значение CSS transform для трансляции.
     */
    function y(n: number): string {
        return `translate3d(0px,${n}px,0px)`
    }

    /**
     * Транслирует элемент контейнера к указанной целевой позиции.
     * @param target - Целевая позиция для трансляции.
     */
    function to(target: number): void {
        if (disabled) return

        for (const style of styles) {
            style.transform = translate(axis.direction(target))
        }
    }

    /**
     * Переключает активное состояние утилиты трансляции.
     * @param active - Определяет, должна ли утилита трансляции быть активной или нет.
     */
    function toggleActive(active: boolean): void {
        disabled = !active
    }

    /**
     * Очищает трансляцию, примененную к элементу контейнера.
     */
    function clear(): void {
        if (disabled) return

        for (const $container of $containers) {
            $container.style.transform = ''
            if (!$container.getAttribute('style')) $container.removeAttribute('style')
        }
    }

    const self = {
        to,
        toggleActive,
        clear,
    } as const

    return self
}

If applicable, which variants of Embla Carousel are relevant to this conversation?

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

Additional information

No response

CodeSandbox example

No response