NgxCarousel

A simple angular carousel component.

👉 Live Demo

✨ Features

• Support pc & mobile
• Support custom indicator
• Support lazy render

💻 Environment Support

• Only tested angular 8.3.29

📦 Install & Usage

npm i @ciri/ngx-carousel
# or
yarn add @ciri/ngx-carousel

Add it to your module:

import { CarouselModule } from '@ciri/ngx-carousel'

@NgModule({
  // ...
  imports: [
    // ...
    CarouselModule
  ],
})

<ngx-carousel [loop]="true">
  <ngx-carousel-item>
    <div class="demo-content" style="background: #FAF9D6">1</div>
  </ngx-carousel-item>

  <ngx-carousel-item>
    <div class="demo-content" style="background: #F4B9C1">2</div>
  </ngx-carousel-item>

  <ngx-carousel-item>
    <div class="demo-content" style="background: #96CDF6">3</div>
  </ngx-carousel-item>
</ngx-carousel>

🎨 Custom Indicator

<style>
  .custom-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
  }
</style>
<ngx-carousel [indicator]="indicator" [loop]="true">
  <ngx-carousel-item>
    <div class="demo-content" style="background: #FAF9D6">1</div>
  </ngx-carousel-item>

  <ngx-carousel-item>
    <div class="demo-content" style="background: #F4B9C1">2</div>
  </ngx-carousel-item>

  <ngx-carousel-item>
    <div class="demo-content" style="background: #96CDF6">3</div>
  </ngx-carousel-item>

  <ng-template #indicator let-data>
    <div class="custom-indicator">
      {{ data.active + 1 }} / {{ data.count }}
    </div>
  </ng-template>
</ngx-carousel>

🐷 Lazy Render

You can use ng-template + lazyRender to implement lazy loading

<ngx-carousel [loop]="true">
  <ngx-carousel-item>
    <div class="demo-content" style="background: #FAF9D6">I'm not lazy</div>
  </ngx-carousel-item>

  <ngx-carousel-item>
    <ng-template lazyRender>
      <div class="demo-content" style="background: #F4B9C1">I'm lazy</div>
    </ng-template>
  </ngx-carousel-item>

  <ngx-carousel-item>
    <ng-template lazyRender>
      <div class="demo-content" style="background: #96CDF6">I'm lazy</div>
    </ng-template>
  </ngx-carousel-item>
</ngx-carousel>

🎁 Inputs

| Name | Type | Default | Description | | ---------------- | ----------------------------------------------------------- | ------- | -------------------------------------------------------- | | initialIndex | number | 0 | Initial index | | loop | boolean | false | Whether to enable loop | | speed | number | 300 | Animation duration (ms) | | autoplay | number | 0 | Autoplay interval (ms),0 means turn off autoplay | | followFinger | boolean | true | If false, move only when you release your finger | | allowTouchMove | boolean | true | If false, you can only use api to slide | | indicator | TemplateRef<{ $implicit: CarouselData }> | - | Custom indicator | | lazyRenderOffset | number | 0 | Number of pre-rendered offsets (left and right) | | cache | boolean | true | Cache rendered items |

🐚 Outputs

| Event | Description | Return value | | ------ | ------------------------------------ | ------------ | | change | Triggered when current slider change | index |

🧩 Properties & Methods

| Name | Type | Description | | ------ | -------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | data | CarouselData | Some component raw data | | goTo | (target: number, immediate: boolean) => void | Slide to target index, params:target: Target indeximmediate: Whether to skip animation | | prev | () => void | Slide to prev slider | | next | () => void | Slide to next slider | | resize | () => void | Recalculate size of sliders |

🍬 CarouselData

| Name | Description | | --------- | ------------------------------- | | active | The index of the current slider | | count | Total number of sliders | | offset | Carousel offset (%) | | animating | True if in transition |