NgxPictureCarousel

Easy to use picture carousel.

Features

• Virtual scrolling: do not render all images at once, saving memory and increasing performance.
• Easy width and height control through properties

Usage

First, import NgxPictureCarousel module:

1// file: app.module.ts
2
3import {NgxPictureCarouselModule} from '@quiui/ngx-picture-container';
4
5@NgModule({
6    imports: [NgxPictureCarouselModule]
7})
8export class AppModule {}

Then, use the quiui-picture-carousel HTML tag:

1<!--file: app.component.html -->
2
3<!-- width and height defaults are 355.6px and 200px -->
4<quiui-picture-carousel 
5    [pictures]="pictures"
6    width="355.6px"
7    height="200px">
8</quiui-picture-carousel>

1// file: app.component.ts
2
3@Component({
4    //...
5})
6export class AppComponent {
7    pictures = [
8        'pictureUrl1',
9        'pictureUrl2',
10        'pictureUrl3'
11    ]
12}