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 index immediate: 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