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

``bash
npm i @ciri/ngx-carousel


or

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

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

`html




`html





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

`html




| 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 |