0.0.4 • Published 3 years ago

@ciri/ngx-carousel v0.0.4

Weekly downloads
9
License
MIT
Repository
github
Last release
3 years ago

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

NameTypeDefaultDescription
initialIndexnumber0Initial index
loopbooleanfalseWhether to enable loop
speednumber300Animation duration (ms)
autoplaynumber0Autoplay interval (ms),0 means turn off autoplay
followFingerbooleantrueIf false, move only when you release your finger
allowTouchMovebooleantrueIf false, you can only use api to slide
indicatorTemplateRef<{ \$implicit: CarouselData }>-Custom indicator
lazyRenderOffsetnumber0Number of pre-rendered offsets (left and right)
cachebooleantrueCache rendered items

🐚 Outputs

EventDescriptionReturn value
changeTriggered when current slider changeindex

🧩 Properties & Methods

NameTypeDescription
dataCarouselDataSome component raw data
goTo(target: number, immediate: boolean) => voidSlide to target index, params:target: Target indeximmediate: Whether to skip animation
prev() => voidSlide to prev slider
next() => voidSlide to next slider
resize() => voidRecalculate size of sliders

šŸ¬ CarouselData

NameDescription
activeThe index of the current slider
countTotal number of sliders
offsetCarousel offset (%)
animatingTrue if in transition