ngx-wrapper-tiny-slider

Angular Wrapper for Tiny Slider (SSR !) (ngx-wrapper-tiny-slider)

A simple angular wrapper for tiny slider. This project is a copy of this package because i need this wrapper up to date, and support SSR.

Getting Started

Link

• github repository
• my twitter
• tiny slider examples

Install

npm i ngx-simple-countdown

Important ! To compile we need to add this line in your tsconfig.json, because there is a bug inside the tiny slider librairy

  "compilerOptions": {
    ...
    "skipLibCheck": true <----
  }

Import in your angular module (or feature module)

app.module.ts

import { NgxWrapperTinySliderModule } from 'ngx-wrapper-tiny-slider';

@NgModule({
  imports: [NgxWrapperTinySliderModule]
})
export class AppModule {}

Use the wrapper in your component

app.component.html

<ngx-wrapper-tiny-slider [config]="tinySliderConfig" #tinySlider>
  <ng-container class="items">
    <div class="item">
      <img src="https://picsum.photos/250/300" />
    </div>
    <div class="item">
      <img src="https://picsum.photos/200/300" />
    </div>
    <div class="item">
      <img src="https://picsum.photos/250/350" />
    </div>
  </ng-container>
</ngx-wrapper-tiny-slider>

<button (click)="prev()">prev</button>
<button (click)="next()">next</button>

app.component.ts

import { NgxWrapperTinySliderInterface } from 'projects/ngx-wrapper-tiny-slider/src/public-api';
import { TinySliderInstance } from 'tiny-slider';

export class AppComponent implements OnInit {
  // GET SLIDER INSTANCE HERE
  @ViewChild('tinySlider', { static: false }) tinySlider: TinySliderInstance;
  // ADD THE SLIDER CONFIG HERE (show tiny slider documentation for more)
  public tinySliderConfig: NgxWrapperTinySliderInterface = {
    gutter: 20,
    items: 1,
    mouseDrag: true
  };

  constructor() {}
  ngOnInit() {}

  // USE THE INSTANCE OF THE SLIDER TO UPDATE SLIDER
  public prev(): void {
    this.tinySlider.goTo('prev');
  }
  public next(): void {
    // number | 'next' | 'prev' | 'first' | 'last'
    this.tinySlider.goTo('next');
  }
}

Use the wrapper with *ngFor

First add this in tinySliderConfig

  public tinySliderConfig: NgxWrapperTinySliderInterface = {
    ...
    waitForDom: true; <----
  };

then initialized the slider in your ngAfterViewInit

  ngAfterViewInit(): void {
    this.tinySlider.initSlider();
  }