@ciri/ngx-carousel

A simple angular carousel component.

Usage no npm install needed!

<script type="module">
  import ciriNgxCarousel from 'https://cdn.skypack.dev/@ciri/ngx-carousel';
</script>

README

NgxCarousel

travis

A simple angular carousel component.

👉 Live Demo

✨ Features

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

💻 Environment Support

  • Only tested angular 8.2.14

📦 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

🐚 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