My3dCarousel

This library was generated with Angular CLI version 13.3.0.

Preview

Setup and usage

Add this code in your app.component.html

<my3d-carousel [slides]="slides" [options]="options" class="col-12" #carousel>
    <ngx-carousel-3d-slide *ngFor="let slide of slides; let i = index" (click)="slideClicked(i)">
        <figure>
            <img class="slide-img" src="{{ slide.src }}" alt="" />
        </figure>
    </ngx-carousel-3d-slide>
</my3d-carousel>

Add this code in app.component.ts

@ViewChild('carousel') carousel: any;
slides = [
    {src: './assets/img/dog_1.jpg'},
    {src: './assets/img/dog_2.jpeg'},
    {src: './assets/img/dog_3.jpg'},
    {src: './assets/img/dog_4.jpg'},
    {src: './assets/img/dog_5.jpg'},
    {src: './assets/img/dog_6.jpg'},
    {src: './assets/img/dog_7.jpg'}
];

options = {
    clicking: true,
    sourceProp: 'src',
    visible: 6,
    perspective: 20,
    startSlide: 0,
    border: 3,
    dir: 'rtl',
    width: 360,
    height: 270,
    space: 250,
    autoRotationSpeed: 500000,
    loop: false,
    controls: true
};

slideClicked (index:any) {
this.carousel.slideClicked(index);
}

Import My3dCarouselModule to app.module.ts