https://github.com/bruckwubete/ngx-carousel-3d

Ngx Carousel
https://github.com/bruckwubete/ngx-carousel-3d

Last synced: about 1 month ago
JSON representation

Ngx Carousel

• Host: GitHub
• URL: https://github.com/bruckwubete/ngx-carousel-3d
• Owner: bruckwubete
• Created: 2018-03-01T19:36:48.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-06-02T19:55:18.000Z (over 2 years ago)
• Last Synced: 2024-11-20T01:27:37.975Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 1.53 MB
• Stars: 7
• Watchers: 3
• Forks: 9
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

### ngx-carousel-3d

## Consuming

## Dependencies

This library needs jquery

import jquery globally as per your type of your project.

## Consuming

#Option 1

clone this repo and run

```bash

$ ng serve

```

you should see something that looks like this at http://localhost:4200/

![alt text](docs/ngx-carousel-3d-output.jpg "ngx-carousel-3d in Action")

#Option 2

In you Angular `AppModule`:

```typescript

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library

import { NgxCarousel3dModule }  from 'ngx-carousel-3d';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    NgxCarousel3dModule,  // Specify Ng2Carousel3dModule as an import

    LibraryModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

Once your library is imported, you can use its components, directives and pipes in your Angular application:

```xml



  {{title}}



    

        

    

```

```typescript

 // app.component.ts

  @ViewChild('carousel') carousel:any;

  movies : Object[] = []

  slides : Array = []

  options : Object = {

    clicking: true,

    sourceProp: 'src',

    visible: 7,

    perspective: 1,

    startSlide: 0,

    border: 3,

    dir: 'ltr',

    width: 360,

    height: 270,

    space: 220,

    autoRotationSpeed: 5000,

    loop: true

}

  constructor(private $movie: MovieService) { //some service  in this case Movie

      $movie.getMovies(1).subscribe(res => {

        this.movies = this.movies.concat(res);

        let newSlides = new Array()

        res.forEach((item) => {

          newSlides.push({src: item['poster_image']})

        })

        this.slides = newSlides.concat(this.slides)

      })

  }

  slideClicked (index) {

    this.carousel.slideClicked(index)

   }

```

```css

  .slide-img {

    width: 100%;

    height: 100%;

  }

```

## Development

To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

```bash

$ npm run build

```

To lint all `*.ts` files:

```bash

$ npm run lint

```

## License

MIT © [Bruck Wubete](mailto:[email protected])