ngx-gbl-carousel
v1.6.0
Published
This is the liberary for 3d carousel on angular project
Downloads
55
Readme
NgxGblCarousel
This is the liberary for 3d carousel on angular project
Compatibility
| Version | Angular | | :--- | :--- | | v1.1.2 | v12.* | | v1.2.3 | V13.* | | v1.3.3 | V14.* | | v1.4.3 | V15.* | | v1.5.0 | V16.* | | v1.6.0 | V17.* |
Usage
In you Angular AppModule
:
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
// Import your library
import { NgxGblCarouselModule } from "ngx-gbl-carousel";
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
NgxGblCarouselModule, // Specify NgxGblCarouselModule as an import
LibraryModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Once your library is imported, you can use its components and types in your Angular application:
Template
<ngx-gbl-carousel [options]="options" class="col-12" (onSlideChanged)="onSlideChanged($event)">
<ngx-gbl-carousel-slide *ngFor="let slide of slides; let i = index">
<img class="slide-img" src="{{ slide.src }}" alt="" />
</ngx-gbl-carousel-slide>
</ngx-gbl-carousel>
Component
import { GblCaruselDirections, GblCaruselOptions, GblSilde } from 'ngx-gbl-carousel';
slides: Array<GblSilde> = [
{ src: './assets/img/penguin-with-glasses.svg' },
{ src: './assets/img/penguin-with-glasses.svg' },
{ src: './assets/img/penguin-with-glasses.svg' },
{ src: './assets/img/penguin-with-glasses.svg' },
{ src: './assets/img/penguin-with-glasses.svg' },
{ src: './assets/img/penguin-with-glasses.svg' },
];
options: GblCaruselOptions = {
totalSlidesNumber: this.slides.length
clicking: true,
visible: 3,
perspective: 1,
startSlide: 0,
border: 3,
dir: GblCaruselDirections.LTR,
width: 200,
height: 170,
space: 220,
autoRotationSpeed: 5000,
autoRotationLocked: false,
loop: true,
};
onSlideChanged(index: number): void {
console.log('Slide clicked', index);
}