@gns088/ngx-carousel NPM

NGX Carousel

About

This package is a carousel component for Angular with no third dependencies.

Installing

npm install --save @gns088/ngx-carousel

Importing

//...
import { NgxCarouselModule } from '@gns088/ngx-carousel';

@NgModule({
  // ...
  imports: [
    // ...
    NgxCarouselModule,
    // ...
  ]
})
export class AppModule {
}

Usage

`MatCarouselComponent`

import { NgxCarouselComponent, NgxCarouselStepComponent } from '@gns088/ngx-carousel';

<ngx-carousel>
  ...
</ngx-carousel>

Attributes

Input	Type	Description	Default value
`height`	`string`	Height Of the carousel.	`400px`
`width`	`string`	Width of the carousel.	`100%`
`applyAnimationToSteps`	`boolean`	apply animation to each steps, will not over ride step animation config, If step level animation is disabled then it won't apply animation to each steps	`true`
`hideOverFlow`	`boolean`	Hide carousel overflow, sometime we need to apply animation which requires overflow hidden, we can hide overflow content using this config.	`false`
`animation`	`boolean`	Apply animation to carousel.	`true`
`carouselAnimationClass`	`string`	Carousel animation class, we can write css for animation in parent component and pass to this config.	`ngx-carousel-fade-animation`
`loop`	`boolean`	Apply loop to carousel steps, If we enable loop then it will show first step after last step again when user click of next button.	`true`
`autoLoop`	`boolean`	To enable automatically move to next step.	`false`
`autoLoopTime`	`number`	Timing for auto change to next step in milliseconds.	`3000`
`outsideButton`	`boolean`	To show arrow button half outside to carousel area (at edge of carousel).	`false`
`allowButtonAnimation`	`boolean`	When user hover on arrow buttons it will show some animation, i.e. moving little left right.	`true`
`useKeyboard`	`boolean`	When user press left and right arrow keys it will change steps.	`true`
`useMouseWheel`	`boolean`	When user scroll on carousel while hovering mouse on carousel it will change steps.	`true`
`pauseOnHover`	`boolean`	When user hover mouse on carousel it will stop auto loop.	`true`
`resetOnResize`	`boolean`	Reset to step 0 on window resize event.	`true`
`showDots`	`boolean`	Show / Hide dots at bottom of carousel.	`true`
`showControls`	`boolean`	Show / Hide next and previous button.	`true`
`previousButtonClass`	`string`	To apply other classes to previous button.
`nextButtonClass`	`string`	To apply other classes to next button.
`previousButtonIconClass`	`string`	To apply icon classes to previous button.	`fas fa-chevron-left`
`nextButtonIconClass`	`string`	To apply icon classes to next button.	`fas fa-chevron-right`
`buttonBg`	`string`	To apply background color to button.	`transparent`
`dotsBg`	`string`	To apply background dots buttons.	`#FFFFFF`
`dotsClass`	`string`	To apply classes dots buttons.
`dotsType`	`box or dot`	To change design of dots.	`dot`
`stepBackgroundSize`	`string`	To set background size to step. when we set image in step background, if image not fits in container then we can use this config	`cover`

Output	Type	Description
`onNext`	`NgxCarouselEvent`	It emits the NgxCarouselEvent when slide move to next step
`onPrevious`	`NgxCarouselEvent`	It emits the NgxCarouselEvent when slide move to previous step
`onStepChange`	`NgxCarouselEvent`	It emits the NgxCarouselEvent when slide move to next or previous step, will emit when step changes
`onContentInIt`	`void`	It emits when ngAfterContentInit life cycle called

`NgxCarouselStepComponent`

import { NgxCarouselComponent, NgxCarouselStepComponent } from '@gns088/ngx-carousel';

<ngx-carousel>
  <ngx-carousel-step>
    ...
  </ngx-carousel-step>
</ngx-carousel>

Attributes

Input	Type	Description	Default value
`bgImage`	`string`	To set background image of steps.
`bgColor`	`string`	To set background color of step.	`#e3dddd`
`noBgColor`	`boolean`	To remove background at step level.	`false`
`buttonBg`	`string`	Step background color of buttons (overrides buttonGb config).
`animation`	`boolean`	To allow animation at step level.	`true`
`hideOverlay`	`boolean`	Hide step overlay.	`false`
`overlayColor`	`string`	Step overlay color.	`#00000040`
`overlayOpacity`	`string`	Step overlay Opacity.	`0.3`
`backgroundSize`	`string`	To set background size to step.
`classes`	`string`	To set classes to step.

Templates

ngxCarouselStepCaption

To add caption inside <ngx-carousel-step></ngx-carousel-step> we need to add ngxCarouselStepCaption.

This template should be placed inside <ngx-carousel-step></ngx-carousel-step>

<ngx-carousel>
  <ngx-carousel-step>
    <ng-template ngxCarouselStepCaption>
      Caption
    </ng-template>
  </ngx-carousel-step>
</ngx-carousel>

ngxCarouselStepContent

To add content inside <ngx-carousel-step></ngx-carousel-step> we need to add ngxCarouselStepContent.

This template should be placed inside <ngx-carousel-step></ngx-carousel-step>

<ngx-carousel>
  <ngx-carousel-step>
    <ng-template ngxCarouselStepContent>
      Content
    </ng-template>
  </ngx-carousel-step>
</ngx-carousel>

ngxCarouselNextButton

To customize a next button we can use ngxCarouselNextButton directive.

This template should be placed inside <ngx-carousel></ngx-carousel>

<ngx-carousel>
  <ng-template ngxCarouselNextButton>
    <i class="fas fa-long-arrow-right"></i>
  </ng-template>
</ngx-carousel>

ngxCarouselPreviousButton

To customize a previous button we can use ngxCarouselPreviousButton directive.

This template should be placed inside <ngx-carousel></ngx-carousel>

<ngx-carousel>
  <ng-template ngxCarouselPreviousButton>
    <i class="fas fa-long-arrow-left"></i>
  </ng-template>
</ngx-carousel>

Types

`NgxCarousel`

export interface NgxCarousel {
  height: string;
  width: string;
  applyAnimationToSteps: boolean;
  hideOverFlow: boolean;
  animation: boolean;
  carouselAnimationClass: string;
  loop: boolean;
  autoLoop: boolean;
  autoLoopTime: number;
  outsideButton: boolean;
  allowButtonAnimation: boolean;
  useKeyboard: boolean;
  useMouseWheel: boolean;
  pauseOnHover: boolean;
  resetOnResize: boolean;
  showDots: boolean;
  showControls: boolean;
  previousButtonClass: string;
  nextButtonClass: string;
  previousButtonIconClass: string;
  nextButtonIconClass: string;
  buttonBg: string;
  dotsBg: string;
  dotsClass: string;
  dotsType: 'box' | 'dot';
  stepBackgroundSize: string;
}

`NgxCarouselStep`

export interface NgxCarouselStep {
  bgImage: string;
  bgColor: string;
  noBgColor: boolean;
  buttonBg: string;
  animation: boolean;
  hideOverlay: boolean;
  overlayColor: string;
  overlayOpacity: string;
  backgroundSize: string;
  classes: string;
}

Sample Code

<ngx-carousel>
  <ngx-carousel-step bgColor="#3b95b8">
    <ng-template ngxCarouselStepContent>
      Content
    </ng-template>
  </ngx-carousel-step>
  <ngx-carousel-step bgColor="#cd7312" buttonBg="#3b95b8"></ngx-carousel-step>
  <ngx-carousel-step bgImage="url(https://picsum.photos/id/1025/1280/720)"></ngx-carousel-step>
  <ngx-carousel-step bgImage="https://picsum.photos/id/1022/1280/720">
    <ng-template ngxCarouselStepContent>
      <div class="step-content">
        <img src="https://picsum.photos/id/1024/1280/720" alt="Image" width="200px">
        <h1>Title</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
          industry's
          standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
          make
          a type specimen book. It has survived not only five centuries, but also the leap into electronic
          typesetting,
          remaining essentially unchanged.</p>
      </div>
    </ng-template>
  </ngx-carousel-step>
</ngx-carousel>