angular-image-text-slider

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',
     
   },
  ];