Ngx-tiny-carousel NPM

NgxTinyCarousel

This library is lightweight carousel plugin for Angular.

Demo

https://1105-6601.github.io/ngx-tiny-carousel-demo/

Compatibility

ngx-tiny-carousel	Angular
>=0.4.0	>=14.2.0

Installation

Add package.

npm i ngx-tiny-carousel --save

Add Module.

@NgModule({
  //
  imports: [
    //
    NgxTinyCarouselModule,
    //
  ],

  bootstrap: [
    //
  ],
})
export class AppModule
{
}

Usage

<div style="width: 400px;">
  <ngx-tiny-carousel [displayCells]="1">
    <ngx-tiny-carousel-cell>
      ...
    </ngx-tiny-carousel-cell>
    <ngx-tiny-carousel-cell>
      ...
    </ngx-tiny-carousel-cell>
    <ngx-tiny-carousel-cell>
      ...
    </ngx-tiny-carousel-cell>
  </ngx-tiny-carousel>
</div>

Image carousel example

ts

@Component({
  selector:    'app',
  templateUrl: './app.component.html',
})
export class CarouselComponent
{
  public imageSources = [
    'https://picsum.photos/400/400',
    'https://picsum.photos/300/400',
    'https://picsum.photos/250/400',
    'https://picsum.photos/400/250',
    'https://picsum.photos/400/300',
  ];
}

html

<div style="width: 400px;">
  <ngx-tiny-carousel [displayCells]="1">
    <ngx-tiny-carousel-cell *ngFor="let src of imageSources">
      <div class="centralise">
        <img [src]="src" alt="">
      </div>
    </ngx-tiny-carousel-cell>
  </ngx-tiny-carousel>
</div>

scss

.centralise {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

Lazy load content

<ngx-tiny-carousel [displayCells]="1">
  <ngx-tiny-carousel-cell *ngFor="let src of imageSources">
    <div class="centralise" *lazyContent>
      <img [src]="src" alt="">
    </div>
  </ngx-tiny-carousel-cell>
</ngx-tiny-carousel>

API

@Input

@Input	Type	Required	Default	Description
displayCells	number	optional	1	Cell count to be displayed at once.
cellHeightScale	number	optional	1	Specifies the ratio of the cell height to the cell width.
dotPosition	string	optional	'inner'	'inner' or 'outer'.
dotStyle	string	optional	'dot'	'dot' or 'bar'.
arrowStyle	string	optional	'default'	'default' or 'circle'.
uiScale	number	optional	none	UI scale of dots and arrows. This will be calculated in response to container element height automatically.
displayArrows	boolean	optional	true	Decide to display arrows or not.
displayDots	boolean	optional	true	Decide to display dots or not.
enableDrag	boolean	optional	false	If set true, The carousel becomes draggable.
enableInfiniteScroll	boolean	optional	false	Must be used with the `enableDrag` option. If set true, The carousel becomes infinite scroll.
cellWidth	number	optional	0 (auto)	Basically calculated automatically. However, this option may be useful if you nest `ngx-tiny-carousel` inside a carousel cell that has drag and infinite scroll enabled.
virtualCellMargin	number	optional	1	If `enableInfiniteScroll` is enabled, cell elements are virtualized. In this case, the cells before and after the visible cell can be pre-rendered by the number of cells specified in `virtualCellMargin`.

Functions

Definition	Description
next(count: number = 1)	Move to positive direction as much as specified cell count.
prev(count: number = 1)	Move to negative direction as much as specified cell count.
jump(cellIndex: number)	Move to specific cell index.