An Angular carousel component with SSR support by Ncremental.
npm install @ncremental/carouselAn Angular carousel component with SSR support by Ncremental.
Simply run:
```
npm i @ncremental/carousel
First, add the component to your module:
`ts
import { NcrCarouselModule } from '@ncremental/carousel';
@NgModule({
imports: [NcrCarouselModule]
})
export class MyModule {}
`
Then, use it in your component's HTML:
`html
[items]="items$ | async"
[template]="carouselItem"
[configuration]="{ autoplayDelay: 1000, visibleCount: { xs: 1, sm: 1, md: 4, lg: 4, xl: 4 } }"
>
`
The following properties can be set on the configuration object:
`ts`
interface CarouselConfig {
visibleCount: {
xs: number;
sm?: number;
md?: number;
lg?: number;
xl?: number;
xxl?: number;
};
touchEnabled?: boolean;
touchEnabledDesktop?: boolean;
autoplayDelay?: number;
controls?: boolean;
indicators?: boolean;
moveBy?: number;
loop?: boolean;
lazyLoadIncrement?: number;
ssrItemsToLoad?: number;
dragThreshold?: number;
templates?: {
prevControl?: TemplateRef
nextControl?: TemplateRef
indicators?: TemplateRef
};
labels?: {
prevControl?: string;
nextControl?: string;
indicators?: string;
};
}
You can easily link different carousels with each other using our public observables and methods.
Let's say you want a second carousel which shows thumbnails of your slides. You can simply create an observable which keeps track of the active UID:
`ts`
activeUID$ = new BehaviorSubject(0);
Then, you need to sync the two carousels:
`ts`
function syncCarousels(mainCarousel: NcrCarouselComponent, thumbCarousel: NcrCarouselComponent) {
// Update UID on main carousel navigation
mainCarousel.currentPage$.pipe(takeUntil(this.destroyed$)).subscribe((page) => this.activeUID$.next(page));
// Sync carousels when UID changes
this.activeUID$.pipe(takeUntil(this.destroyed$)).subscribe((page) => {
mainCarousel.activePage = page;
thumbCarousel.activePage = page;
});
}
In your template you can add a click event which jumps to a specific slide when it is clicked:
`html`
tabindex="0"
(click)="activeUID$.next(uid)"
[class]="activeUID$.getValue() === uid ? 'active-slide' : ''"
>
You can control the autoplay functionality of the carousel using the autoplayPause input and listen for changes with the autoplayPauseChange output.
To pause the autoplay, set the autoplayPause input to true. To resume, set it to false:
`html`
[items]="items$ | async"
[template]="carouselItem"
[configuration]="{ autoplayDelay: 1000, visibleCount: { xs: 1, sm: 1, md: 4, lg: 4, xl: 4 } }"
[autoplayPause]="isAutoplayPaused"
>
In your component class:
`ts
import { Component } from '@angular/core';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
isAutoplayPaused: boolean = false;
// Your button onClick
toggleAutoplay() {
this.isAutoplayPaused = !this.isAutoplayPaused;
}
}
`
If you want to listen to changes on autoplay that come from the carousel, just listen for the (autoplayPauseChange) output value emitted and set your current value to true/false:
`html`
[items]="items$ | async"
[template]="carouselItem"
[configuration]="{ autoplayDelay: 1000, visibleCount: { xs: 1, sm: 1, md: 4, lg: 4, xl: 4 } }"
[autoplayPause]="isPaused"
(autoplayPauseChange)="handleAutoplayPause($event)"
>
In your component class:
`ts
import { Component } from '@angular/core';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
isAutoplayPaused: boolean = false;
// Your button onClick
toggleAutoplay() {
this.isAutoplayPaused = !this.isAutoplayPaused;
}
handleAutoplayPause(state: boolean) {
this.isAutoplayPaused = state;
}
}
`
If you want to try it locally. Run in spartacus-extensions:
``
yarn build:carousel
Then in the package.json of the project you want to try the carousel updated :
```
"@ncremental/carousel": "file:/path/to/spartacus-extensions/dist/ncr-carousel"