ngx-wrapper-tiny-slider

Angular Wrapper for Tiny Slider (with SSR !)

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 #tinySlider [config]="tinySliderConfig">
  <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>
</ngx-wrapper-tiny-slider>

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

app.component.ts

import { TinySliderInstance, TinySliderSettings } 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: TinySliderSettings = {
    gutter: 20,
    items: 1,
    mouseDrag: true
  };

  constructor() {}

  ngOnInit() {}

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

Use the wrapper with *ngFor

First add [initManually]="true" in the component properties

<ngx-wrapper-tiny-slider
  #tinySlider
  [config]="tinySliderConfig"
  [initManually]="true"
></ngx-wrapper-tiny-slider>

when this property is active, you have to initialize the slider yourself. So add this method in your ngAfterViewInit (or where do you need) :

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