0.0.8 • Published 2 years ago
angular-image-text-slider v0.0.8
Angular Image Text Slider
An Angular responsive image slider with lightbox popup. Also support youtube and mp4 video urls.
Features!
Responsive (support images width and height in both % and px) captures swipes from phones and tablets Compatible with Angular Universal Image lightbox popup captures keyboard next/previous arrow key event for lightbox image move Support Images (jpeg, jpg, gif, png and Base64-String), *Handling runtime image arraylist changes
Installation
npm i angular-image-text-slider
Setup :
Import module in your app.module.ts:
import { AngularImageTextSliderModule } from 'angular-image-text-slider';
...
@NgModule({
declarations: [
AppComponent
],
imports: [
AngularImageTextSliderModule,
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Add component in your template file.
<lib-angular-image-text-slider [slides]="eventsList" (slideActionEvent)="goToEventsPage()"></lib-angular-image-text-slider>
EventsList format
eventsList: Array<Object> = [
{
title:'Title 2',
description:'description 2',
imageUrl:'https://img-19.commentcamarche.net/cI8qqj-finfDcmx6jMK6Vr-krEw=/1500x/smart/b829396acc244fd484c5ddcdcb2b08f3/ccmcms-commentcamarche/20494859.jpg',
},
{
title:'Title 3',
description:'description 3',
imageUrl:'https://images.ctfassets.net/hrltx12pl8hq/3j5RylRv1ZdswxcBaMi0y7/b84fa97296bd2350db6ea194c0dce7db/Music_Icon.jpg',
},
];