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

##License As Angular itself, this module is released under the permissive MIT license. Your contributions and suggestions are always welcome :)

##Keywords Angular Angular image slider Angular video slider Angular Carousel responsive slider slideshow carousel slider