ndc

ngx-dynamic-carousel

The ngx-dynamic-carousel library is a carousel component built using Angular.

Showing:

Popularity

Downloads/wk

2

GitHub Stars

6

Maintenance

Last Commit

4mos ago

Contributors

0

Package

Dependencies

1

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

ngx-dynamic-carousel

The ngx-dynamic-carousel library is a carousel component built using Angular.

Installation

To install this library, run:

$ npm i ngx-dynamic-carousel --save

Using this library

From your Angular AppModule:

import { NgxDynamicCarouselModule } from "ngx-dynamic-carousel";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
// import { NoopAnimationsModule }  "@angular/platform-browser/animations";
// BrowserAnimationsModule or NoopAnimationsModule is mandatory.

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule, NgxDynamicCarouselModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Once the library is imported, you can use its component in your Angular application:

<ngx-dynamic-carousel
  [mainContentTemplate]="mainContentTemplate"
  [leftArrowTemplate]="leftArrowTemplate" 
  [rightArrowtemplate]="rightArrowTemplate" 
  [items]="items" 
  [visibleCount]="1"
  [animationState]="'fade'"
  >
  
  <!-- main content template starts here -->
  <ng-template let-item #mainContentTemplate>
    <div class="p-4 border border-gray-500">
      <img [src]="item.imageUrl">
      <span class="font-semibold">
        {{ item.name }}
      </span>
    </div>
  </ng-template>
  <!-- main content template ends here -->

<!-- Left arrow template starts -->
  <ng-template #leftArrowTemplate>Left</ng-template>
<!-- Left arrow template ends -->

<!-- Right arrow template starts -->
  <ng-template #rightArrowTemplate>Right</ng-template>
  <!-- Right arrow template ends -->

</ngx-dynamic-carousel>

Available options

OptionDefault valueDescriptionExample value
mainContentTemplatenone(Required) The main content template defines the template of the carousel.Refer #mainContentTemplate in the above example
itemsnoneIt is an array of objects that should contain all the values that is to be binded in the templateIn the example above, the imageUrl and name are keys that are passed via items
visibleCount1The number of mainContentTemplate that must be appeared in the carousel at a time4 (Four images will be dislpayed at one stretch)
leftArrowTemplate<-It is a template to define the left navigation symbol of the carouselLeft
rightArrowTemplate->It is a template to define the right navigation symbol of the carouselRight
animationStatefadeThe animationState can take the values fade, scale or custom. If the custom is set, then the user can customize the animation.In the above example it is set as fade

Custom Animation

To give custom animation, set animationState property to custom. Now you can pass the animation trigger with the mainContentTemplate.

License

MIT © Tibin && Fenn

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial