ngx-carousel-ease
Version:
ngx-carousel-ease is a versatile Angular library providing a feature-rich, simple, and performant carousel component. This library supports infinite and responsive mode, mouse and touch event. Attention has been put to accessibility, performance, and frie
450 lines (441 loc) • 21.5 kB
TypeScript
import * as _angular_core from '@angular/core';
import { ViewContainerRef, TemplateRef, AfterViewInit, Signal, ChangeDetectorRef } from '@angular/core';
declare class CarouselService {
emit(slide: number, carouselElement: HTMLDivElement): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselService, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<CarouselService>;
}
type AnimationsTiming = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
declare class Carousel {
private readonly carousel;
private readonly maxWidthCarousel;
slideToShow: number;
slideWidth: number;
readonly slideMaxWidth: number;
readonly gap: number;
private readonly responsive;
private readonly loop;
slides: NodeListOf<HTMLDivElement>;
originalSlideWidth: number;
slideWidthWithGap: number;
numberDots: _angular_core.WritableSignal<number>;
maxScrollableContent: _angular_core.WritableSignal<number>;
arrayNumberDots: _angular_core.WritableSignal<number[]>;
slidesContainer: HTMLDivElement;
totalSlides: number;
initialSlideToShow: number;
paddingCarousel: number;
carouselWidth: number;
widthSlideContainer: number;
arrayOfSlides: HTMLDivElement[];
constructor(carousel: HTMLDivElement, maxWidthCarousel: number | undefined, slideToShow: number, slideWidth: number, slideMaxWidth: number, gap: number, responsive: boolean, loop: boolean);
get carouselElement(): HTMLDivElement;
init(): void;
/**
* Set the slide width and max width
* NB: In responsive mode, width is automatically adapted through the setAutoColumnSlideContainer() method.
* Reselect slides for infinite mode slides creation (this method will be called).
*/
setWidthSlides(): void;
/**
* Update carousel properties
* Occurs at start and at resizing.
*/
updateProperties(): void;
/**
* Update slide to show (responsive mode)
* Computes the number of slide fitting
*/
updateSlideToShowResponsive(): void;
/**
* Determine slide to show
* Useful to compute the slide displayed on screen and for the slider class.
* In not responsive mode, the maximum slides to show is determined by the maximum available space and the width of the slide set by the user.
*/
determineSlideToShow(slideFitting: number): void;
/**
* Update slide to show (not responsive mode)
* Computes the number of slide fitting. The number of slides to be shown are determined by the number of slides fitting within its container.
*/
updateSlideToShowNotResponsive(): void;
getPaddingCarousel(): number;
setMaxWidthCarousel(): void;
/**
* Set the with of a slide, responsive mode
* There are [n cards - 1] gaps (3 cards, 2 gaps)
*/
setAutoColumnSlideContainer(): void;
/**
* Define the slide container width
* Make non visible gaps of non visible cards scrollable and is used to compute the maxScrollableContent (strechingEffect)
*/
setWidthSlideContainer(): void;
selectSlides(): NodeListOf<HTMLDivElement>;
slidesToArray(): HTMLDivElement[];
selectSlidesContainer(): HTMLDivElement;
/**
* Set number of dots
* If infinite mode, one more window than normal mode.
*/
setNumberDots(): number;
/**
* Get the max scrollable content
* Useful for the streching effect (not infinite mode), end of the slides
*/
getMaxScroll(): number;
setDraggableImgToFalse(): void;
}
declare class CommunSlider {
readonly carousel: Carousel;
readonly responsive: boolean;
readonly slideToScroll: number;
readonly LIMIT_AUTO_SLIDE: number;
readonly strechingLimit: number;
readonly autoSlide: boolean;
readonly animationTimingFn: string;
readonly animationTimingMs: number;
readonly enableMouseDrag: boolean;
readonly enableTouch: boolean;
readonly autoPlay: boolean;
readonly autoPlayInterval: number;
readonly autoPlayAtStart: boolean;
readonly playDirection: string;
readonly autoplaySlideToScroll: number;
carouselService: CarouselService;
dragging: _angular_core.WritableSignal<boolean>;
currentSlide: _angular_core.WritableSignal<number>;
lastWindow: number;
currentTranslation: _angular_core.WritableSignal<number>;
previousTranslation: number;
direction: 'right' | 'left';
startX: number;
previousX: number;
currentX: number;
positionChange: number;
prevLimit: number;
nextLimit: number;
slidesContainer: HTMLDivElement;
arrayOfSlides: HTMLDivElement[];
totalAmountOfSlides: number;
fullWidthInf: number;
lastWindowTranslation: number;
totalSlides: number;
DOMLimitReached: boolean;
visibleOffsetCardNotResponsive: number;
invisibleOffsetCardNotResponsive: number;
accumulatedSlide: number;
currentCarouselID: number;
autoInterval: number;
playActive: _angular_core.WritableSignal<boolean>;
playButtonDisabled: _angular_core.WritableSignal<boolean>;
directionAutoPlay: (slides: number) => void;
constructor(carousel: Carousel, responsive: boolean, slideToScroll: number, LIMIT_AUTO_SLIDE: number, strechingLimit: number, autoSlide: boolean, animationTimingFn: string, animationTimingMs: number, enableMouseDrag: boolean, enableTouch: boolean, autoPlay: boolean, autoPlayInterval: number, autoPlayAtStart: boolean, playDirection: string, autoplaySlideToScroll: number, carouselService: CarouselService);
initProperties(): void;
launchAutoPlay(): void;
stopAutoPlay(): void;
/**
* Update properties of the slider
* Fired at start and at resizing.
*/
updateProperties(): void;
updateNotResponsive(): void;
/**
* Fired at drag start
* Instantiate property of the starting drag point on the X axis. Used to compute the translation.
* Disabling the transition while applying the transformation because of the attached animation.
*/
dragStart(event: MouseEvent | TouchEvent): void;
/**
* Checks if current event is allowed by user.
* TouchEvent partially supported on Firefox (and working on Safari despite the MDN docs).
*/
currentEventIsDisabled(event: MouseEvent | TouchEvent): boolean;
/**
* Update the direction
* Do not update the direction in case of the same previous position.
*/
setDirection(): void;
/**
* Update the last window translation
* Useful to get the max translation at the end of the slides.
* In not responsive mode, there is possibly a not fully displayed card (card offset).
*/
updateLastWindowTranslation(): void;
/**
* Decrease limit (movement to the left)
* In infinite mode, take full width of a set if on the first slide as new slides are created to the left (a whole set offset).
* Exception: if not responsive (card offset) and finite carousel, the next limit is at the maximum (the end of the carousel)
*/
decreaseLimits(slidesCreatedOnTheLeft?: boolean): void;
/**
* Increase limit on basis of previous computed limits (movement to the right)
* Schema: || previous | current || next
* Exception: if not responsive (card offset) and finite carousel, the next limit is at the maximum (the end of the carousel)
*/
increaseLimits(): void;
/**
* Change prev and next limit on basis of the provided slide number
* Prev and next limit are always calculated as the following:
* || <= prev | current || <= next
*/
changePrevAndNextLimits(slideNumber: number): void;
fireSlideChangeEvent(slideHasChanged: boolean, slide: number): void;
applyTransformation(transformation: number): void;
applyTranslation(transformation: number): void;
}
declare class InfiniteSlider extends CommunSlider {
readonly carouselViewContainer: ViewContainerRef;
readonly carouselTemplateRef: TemplateRef<any>;
readonly MAX_DOM_SIZE: number;
constructor(carousel: Carousel, responsive: boolean, slideToScroll: number, LIMIT_AUTO_SLIDE: number, strechingLimit: number, autoSlide: boolean, animationTimingFn: string, animationTimingMs: number, MAX_DOM_SIZE: number, enableMouseDrag: boolean, enableTouch: boolean, autoPlay: boolean, autoPlayInterval: number, autoPlayAtStart: boolean, playDirection: string, autoplaySlideToScroll: number, carouselService: CarouselService, carouselViewContainer: ViewContainerRef, carouselTemplateRef: TemplateRef<any>);
initProperties(): void;
/**
* next and prev are defined separatively
*/
defineAutoPlayDirection(): void;
/**
* Add slides to the right at start
* If only one window (number of dots === 1) and not responsive mode, there is possibly space at start for slides to the right (even though this configuration does not make a lot of sense)
* TODO: ajouter des slides si slidesToShow > total slides
*/
addSlidesToRightAtStart(): void;
/**
* Fired at drag start
* Instantiate property of the starting drag point on the X axis. Used to compute the translation.
* Disabling the transition while applying the transformation because of the attached animation.
*/
dragStart(event: MouseEvent | TouchEvent): void;
/**
* Relaunch autoPlay if not disabled or infinite mode (never disabled by limits)
* Restart only if started (playActive).
*/
relaunchAutoPlay(): void;
/**
* Fired at drag end
*/
dragStop(event: MouseEvent | TouchEvent): void;
autoSlider(): void;
/**
* Fired at dragging
* Compute the translation, change the slide number, update the direction.
*/
dragMove(event: MouseEvent | TouchEvent): void;
/**
* Responsible for changing slide number and updating the limits.
* If createSlidesInfiniteModeIfLimits() doesn't take action, slide change according to previous computed limits.
*/
modifyCurrentSlide(): void;
/**
* Handle slide creation in infinite mode if limits reached
* Mouse or touch drag.
*/
createSlidesInfiniteModeIfLimits(): boolean;
/**
* Append or prepend new slides according to the direction
* If new slides prepended, update the translation to the correct place (appending new slides do not change the translation).
* Limit DOM growth or update last window translation if applicable.
*/
appendOrPrependElements(): void;
/**
* Limit DOM growth
* Reset the view accordingly.
*/
limitDOMGrowth(): void;
/**
* Reset the view in a movement to the left
* New slides added to the left, so the view has to be updated accordingly.
* If the carousel is moved with the mouse | touch event (dragging is true), the offset should be equal to a full carousel width. Otherwise (with the buttons), the computed translation should be taken into account.
* getBoundingClientRect triggers reflow of the element.
*/
resetViewLeftDirection(): void;
/**
* Reset the view in a movement to the right
* First set of slides have been deleted, so the translation has to be updated accordingly.
* currentTranslation is a negative number so it will be decreased by a set of slides.
* getBoundingClientRect triggers reflow of the element.
*/
resetViewRightDirection(): void;
addSlidesToTheLeft(): void;
addSlidesToTheRight(): void;
/**
* Increase limit on basis of previous computed limits (movement to the right)
* Schema: || previous | current || next
*/
increaseLimits(): void;
/**
* Previous button navigation
*/
prev(slides?: number): void;
/**
* Next button navigation
*/
next(slides?: number): void;
/**
* Buttons navigation in infinite mode
* Create new slide if limits reached (start or end). Update slide, limits and apply transformation accordingly.
* There is (possibly) a card offset if not responsive
*/
handleBtnInfinite(step: number): void;
/**
* Navigation with bullet points
* Update values accordingly.
*/
goTo(bullet: number): void;
/**
* Bullets navigation
* Create new slides if exceeding end of carousel.
* There is (possibly) a card offset if not responsive
*/
navInfiniteBullets(bullet: number): void;
/**
* Exception: if only one window (numberDots === 1), update the accumulatedSlide to let the transformation occurs, but currentSlide should stay at 0.
*/
changeSlideNumber(step: number): void;
infiniteChangeSlideNumber(step: number): void;
/**
* Compute transformation that will be applied on basis of the provided slide number
*/
computeTransformation(slide: number): void;
}
declare class FiniteSlider extends CommunSlider {
constructor(carousel: Carousel, responsive: boolean, slideToScroll: number, LIMIT_AUTO_SLIDE: number, strechingLimit: number, autoSlide: boolean, animationTimingFn: string, animationTimingMs: number, enableMouseDrag: boolean, enableTouch: boolean, autoPlay: boolean, autoPlayInterval: number, autoPlayAtStart: boolean, playDirection: string, autoplaySlideToScroll: number, carouselService: CarouselService);
initProperties(): void;
/**
* In finite carousel, clear autoPlay interval if limits are reached.
*/
disableAutoPlayBtn(): void;
/**
* Fired at drag start
* Instantiate property of the starting drag point on the X axis. Used to compute the translation.
* Disabling the transition while applying the transformation because of the attached animation.
*/
dragStart(event: MouseEvent | TouchEvent): void;
/**
* Fired at drag end
* If limits reached (start or end), put back to the current slide. Updates previous translation.
*/
dragStop(event: MouseEvent | TouchEvent): void;
/**
* Fired at dragging
* Compute the translation, change the slide number, update the direction.
*/
dragMove(event: MouseEvent | TouchEvent): void;
strechingEffect(): boolean;
/**
* Responsible for changing slide number and updating the limits.
* In finite mode, if all slides visible on one window or end of carousel, early return to not trigger change event.
*/
modifyCurrentSlide(): void;
endOfCarousel(): boolean;
/**
* Auto slide card if option enabled, applied on both directions.
* Prevents auto slide on limits in finite mode (if streching < limit auto slide).
* If only one slide is displayed (slideToShow === 1), the width of the slide corresponds to the window's width (a dot). Hence, taking the min between the two.
* In non responsive and non infinite, there is possibly an offset of the current limit.
*/
autoSlider(): void;
/**
* Decrease limit (movement to the left)
* Exception: if not responsive (card offset) and finite carousel, the next limit is at the maximum (the end of the carousel)
*/
decreaseLimits(): void;
/**
* Increase limit on basis of previous computed limits (movement to the right)
* Schema: || previous | current || next
* Exception: if not responsive (card offset) and finite carousel, the next limit is at the maximum (the end of the carousel)
*/
increaseLimits(): void;
/**
* Previous button navigation
*/
prev(slides?: number): void;
/**
* Relaunch autoPlay if not disabled.
* Restart only if started (playActive). Play button disabled when limits reached (finite carousel).
*/
relaunchAutoPlay(): void;
defineAutoPlayDirection(): void;
/**
* Next button navigation
*/
next(slides?: number): void;
/**
* Navigation with bullet points
* Update values accordingly.
*/
goTo(bullet: number): void;
/**
* Exception: if only one window (numberDots === 1), update the accumulatedSlide to let the transformation occurs, but currentSlide should stay at 0.
*/
changeSlideNumber(step: number): void;
finiteChangeSlideNumber(step: number): void;
/**
* Compute transformation that will be applied on basis of the provided slide number
* Exception: if not responsive (card offset) and finite carousel, the next limit is the end of the carousel
*/
computeTransformation(slide: number): void;
}
declare class CarouselComponent implements AfterViewInit {
private cd;
private carouselService;
maxWidthCarousel: _angular_core.InputSignal<number | undefined>;
infinite: _angular_core.InputSignal<boolean>;
responsive: _angular_core.InputSignal<boolean>;
autoSlide: _angular_core.InputSignal<boolean>;
slideToShow: _angular_core.InputSignal<number>;
slideToScroll: _angular_core.InputSignal<number>;
autoslideLimitPercentCard: _angular_core.InputSignal<number>;
strechingLimit: _angular_core.InputSignal<number>;
slideWidth: _angular_core.InputSignal<number>;
slideMaxWidth: _angular_core.InputSignal<number>;
dots: _angular_core.InputSignal<boolean>;
arrows: _angular_core.InputSignal<boolean>;
counter: _angular_core.InputSignal<boolean>;
enableMouseDrag: _angular_core.InputSignal<boolean>;
enableTouch: _angular_core.InputSignal<boolean>;
counterSeparator: _angular_core.InputSignal<string>;
gapBetweenSlides: _angular_core.InputSignal<number>;
animationTimingMs: _angular_core.InputSignal<number>;
maxDomSize: _angular_core.InputSignal<number>;
animationTimingFn: _angular_core.InputSignal<AnimationsTiming>;
autoPlay: _angular_core.InputSignal<boolean>;
autoPlayInterval: _angular_core.InputSignal<number>;
autoPlayAtStart: _angular_core.InputSignal<boolean>;
displayAutoPlayControls: _angular_core.InputSignal<boolean>;
autoPlaySlideToScroll: _angular_core.InputSignal<number>;
autoPlayDirection: _angular_core.InputSignal<"ltr" | "rtl">;
private carouselContainer;
private resizeEvent;
private mouseUpEvent;
private visibilityEvent;
private previousWidth;
private currentWidth;
private isBrowser;
private carousel;
slider: InfiniteSlider | FiniteSlider;
carouselViewContainer: ViewContainerRef;
carouselTemplateRef: TemplateRef<any>;
carouselDots: Signal<number>;
carouselMaxScrollableContent: Signal<number>;
carouselArrayNumberDots: Signal<number[]>;
sliderCurrentSlide: Signal<number>;
sliderCurrentTranslation: Signal<number>;
sliderPlayActive: Signal<boolean>;
sliderPlayButtonDisabled: Signal<boolean>;
sliderDragging: Signal<boolean>;
constructor(cd: ChangeDetectorRef, carouselService: CarouselService, platformId: Object);
ngAfterViewInit(): void;
instantiateSlider(): void;
listeners(): void;
/**
* Reinitialize variables at resize
*/
resize(): void;
/**
* Removes active subscriptions and clear interval autoplay.
*/
ngOnDestroy(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselComponent, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselComponent, "carousel", never, { "maxWidthCarousel": { "alias": "maxWidthCarousel"; "required": false; "isSignal": true; }; "infinite": { "alias": "infinite"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "autoSlide": { "alias": "autoSlide"; "required": false; "isSignal": true; }; "slideToShow": { "alias": "slideToShow"; "required": false; "isSignal": true; }; "slideToScroll": { "alias": "slideToScroll"; "required": false; "isSignal": true; }; "autoslideLimitPercentCard": { "alias": "autoslideLimitPercentCard"; "required": false; "isSignal": true; }; "strechingLimit": { "alias": "strechingLimit"; "required": false; "isSignal": true; }; "slideWidth": { "alias": "slideWidth"; "required": false; "isSignal": true; }; "slideMaxWidth": { "alias": "slideMaxWidth"; "required": false; "isSignal": true; }; "dots": { "alias": "dots"; "required": false; "isSignal": true; }; "arrows": { "alias": "arrows"; "required": false; "isSignal": true; }; "counter": { "alias": "counter"; "required": false; "isSignal": true; }; "enableMouseDrag": { "alias": "enableMouseDrag"; "required": false; "isSignal": true; }; "enableTouch": { "alias": "enableTouch"; "required": false; "isSignal": true; }; "counterSeparator": { "alias": "counterSeparator"; "required": false; "isSignal": true; }; "gapBetweenSlides": { "alias": "gapBetweenSlides"; "required": false; "isSignal": true; }; "animationTimingMs": { "alias": "animationTimingMs"; "required": false; "isSignal": true; }; "maxDomSize": { "alias": "maxDomSize"; "required": false; "isSignal": true; }; "animationTimingFn": { "alias": "animationTimingFn"; "required": false; "isSignal": true; }; "autoPlay": { "alias": "autoPlay"; "required": false; "isSignal": true; }; "autoPlayInterval": { "alias": "autoPlayInterval"; "required": false; "isSignal": true; }; "autoPlayAtStart": { "alias": "autoPlayAtStart"; "required": false; "isSignal": true; }; "displayAutoPlayControls": { "alias": "displayAutoPlayControls"; "required": false; "isSignal": true; }; "autoPlaySlideToScroll": { "alias": "autoPlaySlideToScroll"; "required": false; "isSignal": true; }; "autoPlayDirection": { "alias": "autoPlayDirection"; "required": false; "isSignal": true; }; }, {}, ["carouselViewContainer", "carouselTemplateRef"], ["*"], true, never>;
}
export { CarouselComponent };