https://github.com/ZouYouShun/ngx-hm-carousel
a light carousel for Angular18+, support mobile touch by hammerJs
https://github.com/ZouYouShun/ngx-hm-carousel
Last synced: about 1 month ago
JSON representation
a light carousel for Angular18+, support mobile touch by hammerJs
- Host: GitHub
- URL: https://github.com/ZouYouShun/ngx-hm-carousel
- Owner: ZouYouShun
- License: mit
- Created: 2017-11-30T10:14:44.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-09-08T17:19:35.000Z (about 1 year ago)
- Last Synced: 2024-10-12T18:50:40.184Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/stackblitz-starters-nkd5pk?file=src%2Fmain.ts
- Size: 704 KB
- Stars: 60
- Watchers: 3
- Forks: 10
- Open Issues: 5
-
Metadata Files:
- Readme: README-LEGACY.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
- fucking-awesome-angular - ngx-hm-carousel - A light carousel for Angular 18+, supports mobile touch with 🌎 [HammerJs](hammerjs.github.io/). (Third Party Components / Carousels)
- awesome-angular - ngx-hm-carousel - A light carousel for Angular 18+, supports mobile touch with [HammerJs](https://hammerjs.github.io/). (Third Party Components / Carousels)
- fucking-awesome-angular - ngx-hm-carousel - A light carousel for Angular 18+, supports mobile touch with 🌎 [HammerJs](hammerjs.github.io/). (Table of contents / Third Party Components)
README
[](http://badge.fury.io/js/ngx-hm-carousel)
# ngx-hm-carousel
A lightweight carousel UI for Angular, support mobile touch with Hammerjs.
Work with custom animation, and server-side-rendering.
## Description
An Carousel that easy to use with your custom template.
This package is design by angular and hammerjs.
Depend on [Hammerjs](https://hammerjs.github.io/).
Support Angular 12+ and Rxjs6+
## Example
https://alanzouhome.firebaseapp.com/package/NgxHmCarousel
## Stackblitz Example
[with custom animation](https://stackblitz.com/edit/ngx-hm-carousel-fade-example)
[custom-breakpoint](https://stackblitz.com/edit/ngx-hm-carousel-custom-breakpoint)
[change-show-number-dynamicly](https://stackblitz.com/edit/ngx-hm-carousel-change-show-number-dynamicly)
[disable-drag event](https://stackblitz.com/edit/ngx-hm-carousel-disable-drag)
[loop carousel](https://stackblitz.com/edit/ngx-hm-carousel-seprate-transition-class)
## Install
```ts
npm install --save ngx-hm-carousel
```
1. HammerJs
- Import `hammerjs` in your main.ts or app.module.ts;
```ts
import 'hammerjs';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
...
...
```
2. ResizeObserver
We base on browser `ResizeObserver` API, if you need support not support browser, import [`polyfill`](https://www.npmjs.com/package/resize-observer-polyfill) in your `polyfills.ts`.
polyfills.ts
```ts
import 'resize-observer-polyfill';
...
import 'zone.js';
```
- Import `NgxHmCarouselModule` into your main AppModule or the module where you want use.
1. Module
```ts
import { NgxHmCarouselModule } from 'ngx-hm-carousel';
@NgModule({
imports: [NgxHmCarouselModule],
})
export class YourModule {}
```
2. HTML
```html
{{i}}
{{i}}
keyboard_arrow_left
keyboard_arrow_right
```
2. TS
```ts
import { Component } from '@angular/core';
@Component({
selector: 'app-drag-one',
templateUrl: './drag-one.component.html',
styleUrls: ['./drag-one.component.scss'],
})
export class DragOneComponent {
currentIndex = 0;
speed = 5000;
infinite = true;
direction = 'right';
directionToggle = true;
autoplay = true;
avatars = '1234567891234'.split('').map((x, i) => {
const num = i;
// const num = Math.floor(Math.random() * 1000);
return {
url: `https://picsum.photos/600/400/?${num}`,
title: `${num}`,
};
});
constructor() {}
click(i) {
alert(`${i}`);
}
}
```
3. SCSS
- this project not contain any specile style, you can custom by yourself
```scss
$transition_time: 0.2s;
.carousel {
color: white;
.content {
display: flex;
.item {
width: 100%;
padding: 0.5em;
display: block;
opacity: 0.5;
transition: opacity 0.295s linear $transition_time;
&.visible {
opacity: 1;
}
.img {
width: 100%;
height: 400px;
display: block;
background-size: cover;
background-position: center;
}
}
}
.ball {
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
border: 2px solid;
opacity: 0.5;
&.visible {
opacity: 1;
}
}
.click-area {
width: 50px;
text-align: center;
i {
font-size: 3em;
}
}
}
```
[View more examples](https://alanzouhome.firebaseapp.com/package/NgxHmCarousel)
## Attribute
### Configuration (Input)
---
| Attribute | Necessary | Default value | Type | Location | Description |
| -------------------- | --------- | ------------- | ----------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `autoplay` | no | false | `boolean` | ngx-hm-carousel | carousel auto play confing |
| `autoplay-speed` | no | 5000 (ms) | `number` | ngx-hm-carousel | auto play speed |
| `between-delay` | no | 8000 (ms) | `number` | ngx-hm-carousel | each auto play between time |
| `autoplay-direction` | no | 'right' | `'left'` or `'right'` | ngx-hm-carousel | auto play direction |
| `mouse-enable` | no | false | `boolean` | ngx-hm-carousel | is mouse moveover stop the auto play |
| `autoplay` | no | false | `boolean` | ngx-hm-carousel | carousel auto play config |
| `[breakpoint]` | no | [] | `NgxHmCarouselBreakPointUp` | ngx-hm-carousel | switch show number with own logic like bootstrap scss media-breakpoint-up |
| `show-num` | no | 1 | `number` or `'auto'` | ngx-hm-carousel | how many number items to show once |
| `scroll-num` | no | 1 | `number` | ngx-hm-carousel | how many number with each scroll |
| `drag-many` | no | false | `boolean` | ngx-hm-carousel | is can scroll many item once, simulate with scrollbar |
| `swipe-velocity` | no | 0.3 | `number` | ngx-hm-carousel | Minimal velocity required before recognizing, unit is in px per ms. |
| `pan-boundary` | no | 0.15 | `number` of `false` | ngx-hm-carousel | user move picture with the container width rate, when more than that rate, it will go to next or prev, set false will never move with distance rate |
| `align` | no | 'left' | `'left'` or `'right'` or `'center'` | ngx-hm-carousel | when show-num is bigger than 1, the first item align |
| `infinite` | no | false | `boolean` | ngx-hm-carousel | is the carousel will move loop |
| `data` | no | undefined | `any[]` | ngx-hm-carousel | the data you using with `*ngFor`, it need when infinite mode or autoplay mode |
| `aniTime` | no | 400 | `number` | ngx-hm-carousel | when `infinite` is true, the animation time with item |
| `aniClass` | no | 'transition' | `string` | ngx-hm-carousel | this class will add when carousel touch drag or click change index |
| `aniClassAuto` | no | 'aniClass' | `string` | ngx-hm-carousel | this class will add when carousel auto play |
| `disable-drag` | no | false | `boolean` | ngx-hm-carousel | disable drag event with touch and mouse pan moving |
| `not-follow-pan` | no | false | `boolean` | ngx-hm-carousel | disable when drag occur the child element will follow touch point. |
| `[(ngModel)]` | no | 0 | `number` | ngx-hm-carousel | You can bind ngModel with this carousel, it will two way binding with current index. You also can use `(ngModelChange)="change($event)"` with that. |
```ts
// the breakpoint interface
export interface NgxHmCarouselBreakPointUp {
width: number;
number: number;
}
```
### Other Directive
normal click with effect the touch event, using this event replace that.
| Attribute | Location | Description |
| ---------------------- | -------- | -------------------------------------- |
| `ngxHmCarouselDynamic` | any tag | It will dynamic load tag with element. |
This Directive will Dynamic load element with previous element and next element and current element.
- Example
```html
```
1. first data is this data index
2. length is ths total length with array
3. index is now index