ngx-gbl-carousel

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