A simple Angular 20 wrapper for Tiny Slider
npm install ngx-wrapper-tiny-sliderA 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.
- github repository
- my twitter
- tiny slider examples
``sh`
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
`json`
"compilerOptions": {
...
"skipLibCheck": true <----
}
##### app.module.ts
`ts
import { NgxWrapperTinySliderModule } from 'ngx-wrapper-tiny-slider';
@NgModule({
imports: [NgxWrapperTinySliderModule]
})
export class AppModule {}
`
##### app.component.html
`html
`
##### app.component.ts
`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);
}
}
`
First add [initManually]="true" in the component properties
`html`
[config]="tinySliderConfig"
[initManually]="true"
>
when this property is active, you have to initialize the slider yourself. So add this method in your ngAfterViewInit (or where do you need) :
`ts``
ngAfterViewInit(): void {
this.tinySlider.initSlider();
}