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.

Support Angular 12+ and Rxjs6+

Example

https://alanzouhome.firebaseapp.com/package/NgxHmCarousel

Stackblitz Example

with custom animation

custom-breakpoint

change-show-number-dynamicly

disable-drag event

loop carousel

Install

npm install --save ngx-hm-carousel

1. HammerJs

• Import hammerjs in your main.ts or app.module.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';
...
...

1. ResizeObserver We base on browser ResizeObserver API, if you need support not support browser, import polyfill in your polyfills.ts.

polyfills.ts

import 'resize-observer-polyfill';
...

import 'zone.js';

• Import NgxHmCarouselModule into your main AppModule or the module where you want use.

1. Module

import { NgxHmCarouselModule } from 'ngx-hm-carousel';

@NgModule({
  imports: [NgxHmCarouselModule],
})
export class YourModule {}

1. HTML

<ngx-hm-carousel
  [(ngModel)]="currentIndex"
  [show-num]="4"
  [autoplay-speed]="speed"
  [infinite]="infinite"
  [drag-many]="true"
  [aniTime]="200"
  [data]="avatars"
  class="carousel c-accent"
>
  <section ngx-hm-carousel-container class="content">
    <article
      class="item cursor-pointer"
      ngx-hm-carousel-item
      *ngFor="let avatar of avatars; let i = index"
      [ngClass]="{'visible': currentIndex===i}"
    >
      <div
        class="img"
        (click)="click(i)"
        [style.backgroundImage]="'url('+avatar.url+')'"
      >
        {{i}}
      </div>
    </article>
    <ng-template #infiniteContainer></ng-template>
  </section>

  <!-- only using in infinite mode or autoplay mode, that will render with-->
  <ng-template #carouselContent let-avatar let-i="index">
    <article
      class="item cursor-pointer"
      [ngClass]="{'visible': currentIndex===i}"
    >
      <div
        class="img"
        (click)="click(i)"
        [style.backgroundImage]="'url('+avatar.url+')'"
      >
        {{i}}
      </div>
    </article>
  </ng-template>

  <ng-template #carouselPrev>
    <div class="click-area">
      <i class="material-icons">keyboard_arrow_left</i>
    </div>
  </ng-template>
  <ng-template #carouselNext>
    <div class="click-area">
      <i class="material-icons">keyboard_arrow_right</i>
    </div>
  </ng-template>

  <ng-template #carouselDot let-model>
    <div
      class="ball bg-accent"
      [class.visible]="model.index === model.currentIndex"
    ></div>
  </ng-template>

  <ng-template #carouselProgress let-progress>
    <div class="progress"></div>
  </ng-template>
</ngx-hm-carousel>

1. 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}`);
  }
}

1. SCSS

• this project not contain any specile style, you can custom by yourself

$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

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.

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

<section ngx-hm-carousel-container class="content">
  <article
    class="item cursor-pointer"
    ngx-hm-carousel-item
    *ngFor="let item of data; let i = index"
  >
    <div
      *ngxHmCarouselDynamic="i; length: data.length; index: currentI"
      class="img"
      [style.backgroundImage]="item.url"
    ></div>
  </article>
</section>

1. first data is this data index
2. length is ths total length with array
3. index is now index