@gns088/ngx-carousel

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>

Contributing

How to help

• Git hub Repo
• For bugs and opinions, please open an issue
• For pushing changes, please open a pull request

Running the demo application

npm run start