ngx-hm-carousel v3.0.0

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';
...
...

2. 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 {}

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

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

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

// the breakpoint interface
export interface NgxHmCarouselBreakPointUp {
  width: number;
  number: number;
}

Other Directive

normal click with effect the touch event, using this event replace that.

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