ngx-infinite-smooth-carousel

NgxInfiniteSmoothCarousel is a Angular library containing an infinite carousel to present images for your app.

Usage no npm install needed!

<script type="module">
  import ngxInfiniteSmoothCarousel from 'https://cdn.skypack.dev/ngx-infinite-smooth-carousel';
</script>

README

NgxInfiniteSmoothCarousel

NgxInfiniteSmoothCarousel is a Angular library containing an infinite carousel to present images for your app.

This library was generated with Angular CLI version 10.2.0.

Installation

Use the package manager npm to install NgxInfiniteSmoothCarousel.

npm i ngx-infinite-smooth-carousel --save

Usage

Main module file

import { NgxInfiniteSmoothCarouselModule } from 'ngx-infinite-smooth-carousel';

@NgModule({
  imports: [
    NgxInfiniteSmoothCarouselModule,
  ],
})
export class AppModule { }

Component HTML

<ngx-infinite-smooth-carousel [config]="config"></ngx-infinite-smooth-carousel>

Component TS

  config : NgxIscConfig = {
    itemWidth: "150",          /* Width of each img in px */
    align: "middle",           /* OPTIONAL : Imgs vertical alignement: top | middle | bottom */
    spaceBetweenItems: "30",   /* OPTIONAL  : Space bewteen each items in px, it must be a multiple of ten */
    speed: "16",               /* OPTIONAL : Speed for a complete loop in seconds */
    stopOnHover: true,         /* OPTIONAL : Stop the animation if user hover the carousel */
    img:                       /* Array of img urls */
    [
      '/assets/imgs/afm_telethon.png',
      '/assets/imgs/afp_france_handicap.png',
      '/assets/imgs/ars_idf.png',
      '/assets/imgs/bpi.png',
      '/assets/imgs/essca.png',
      '/assets/imgs/handicap_international.png',
      '/assets/imgs/hizy.png',
      '/assets/imgs/lab_sante.png',
      '/assets/imgs/mobilite_reduite.png',
      '/assets/imgs/tangata.png',
      '/assets/imgs/ulysse_transport.png'
    ]
  }