ngx-slides

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

Usage no npm install needed!

<script type="module">
  import ngxSlides from 'https://cdn.skypack.dev/ngx-slides';
</script>

README

ngx-slides

GitHub license npm Build Status Codecov branch npm GitHub top language GitHub code size in bytes GitHub issues GitHub closed issues GitHub contributors

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

Features

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

Examples

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.