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