Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xiaojundebug/ngx-carousel
A simple angular carousel component.
https://github.com/xiaojundebug/ngx-carousel
Last synced: 21 days ago
JSON representation
A simple angular carousel component.
- Host: GitHub
- URL: https://github.com/xiaojundebug/ngx-carousel
- Owner: xiaojundebug
- Created: 2020-06-21T10:04:48.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T04:38:53.000Z (almost 2 years ago)
- Last Synced: 2024-10-17T05:08:29.184Z (2 months ago)
- Language: TypeScript
- Homepage: https://xiaojundebug.github.io/ngx-carousel/
- Size: 5.05 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NgxCarousel
A simple angular carousel component.
👉 [Live Demo](https://stackblitz.com/edit/ngx-carousel-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
yarn add @ciri/ngx-carousel
```
Add it to your module:
```typescript
import { CarouselModule } from '@ciri/ngx-carousel'
@NgModule({
// ...
imports: [
// ...
CarouselModule
],
})
```
```html
1
2
3
```
## 🎨 Custom Indicator
```html
.custom-indicator {
position: absolute;
bottom: 0;
right: 0;
padding: 0 10px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
}
1
2
3
{{ data.active + 1 }} / {{ data.count }}
```
## 🐷 Lazy Render
You can use `ng-template` + `lazyRender` to implement lazy loading
```html
I'm not lazy
I'm lazy
I'm lazy
```
## 🎁 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](#-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](#-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 |