79729401

Date: 2025-08-08 06:27:07
Score: 0.5
Natty:
Report link

I use a module package working fine. the below step:

for html & core embla, you can get from this URL: https://codesandbox.io/p/sandbox/ffj8m2?file=%2Fsrc%2Fjs%2Findex.ts

npm install embla-carousel --save

import { AfterViewInit, Component } from '@angular/core';
import EmblaCarousel, { EmblaOptionsType } from 'embla-carousel';
import Autoplay from 'embla-carousel-autoplay';
import ClassNames from 'embla-carousel-class-names';
import {
    addDotBtnsAndClickHandlers,
    addPrevNextBtnsClickHandlers,
    setupTweenOpacity,
} from '../../../../core/embla';

export class CarouselComponent implements AfterViewInit {
    emblaOptions: Partial<EmblaOptionsType> = {
        loop: true,
    };
    plugins = [Autoplay(), ClassNames()];

    ngAfterViewInit(): void {
        const emblaNode = <HTMLElement>document.querySelector('.embla');
        const viewportNode = <HTMLElement>emblaNode.querySelector('.embla__viewport');
        const prevBtn = <HTMLElement>emblaNode.querySelector('.embla__button--prev');
        const nextBtn = <HTMLElement>emblaNode.querySelector('.embla__button--next');
        const dotsNode = <HTMLElement>document.querySelector('.embla__dots');

        const emblaApi = EmblaCarousel(viewportNode, this.emblaOptions);
        const removeTweenOpacity = setupTweenOpacity(emblaApi);
        const removePrevNextBtnsClickHandlers = addPrevNextBtnsClickHandlers(
            emblaApi,
            prevBtn,
            nextBtn,
        );
        const removeDotBtnsAndClickHandlers = addDotBtnsAndClickHandlers(emblaApi, dotsNode);

        emblaApi
            ?.on('destroy', removeTweenOpacity)
            .on('destroy', removePrevNextBtnsClickHandlers)
            .on('destroy', removeDotBtnsAndClickHandlers);
    }
}
Reasons:
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Abudy Gold