ngx-slides

ngx-slides

ngx-slides is a lightweight slideshow component for Anguar 4 applications and fully configurable.

Features

• Autoplay
• Navigation buttons
• Customizable delay time, height, widths

Examples

• demo-page

Installation

• npm install ngx-slides

Using with webpack and tsc builds/ angular-cli builds

• import NgxSlidesModule into your app.module;

import { NgxSlidesModule } from 'ngx-slides'

• add NgxSlidesModule to the imports of your NgModule:

@NgModule({
  imports: [
    ...,
    NgxSlidesModule
  ],
  ...
})
class YourModule { ... }

• use <ngx-slides></ngx-slides> in your templates to add pagination in your view like below

<ngx-slides [slideImages]="slides" [config]="config"></ngx-slides>

Config

Input

• slideImages: any[] - An array of objects that contains the image url and captions.
• config: {} - Object with configurationn values for the slides with below format.

slideImages = [
    {
      image: '/assets/images/image3.jpeg', //path to image
      title: 'Image1' //caption for image
    }
]

config = {
        width:"800px", //width of slides defaults to 800px
        height:"300px" //height of slides defaults to 300px
        autoPlay:false //autoplay required or not defaults to false
        delay: 3000 // delay for autoplay
      }

Help Improve

Found a bug or an issue with this? Open a new issue here on GitHub.

Contributing to this project

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.

• Bug reports
• Feature requests
• Pull requests