Ngx Hm Carousel In Angular

(1) For learning ngx-hm-carousel we need to install ngx-hm-carousel package in our project using following command :

• npm i ngx-hm-carousel

(2) Now add module in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgxHmCarouselModule } from 'ngx-hm-carousel';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    NgxHmCarouselModule,
  ],
  declarations: [
    AppComponent, 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

(3) Add html in app.component.html

<h1 class="text-center">ngx-hm-carousel</h1>
<ngx-hm-carousel [(ngModel)]="index" [autoplay-speed]="speed" [autoplay]="autoplay" [autoplay-direction]="direction"
  [infinite]="infinite" [between-delay]="2000" [data]="avatars" [aniTime]="200" class="carousel text-accent">

  <section ngx-hm-carousel-container class="content">
    <article class="item cursor-pointer fade_animation" ngx-hm-carousel-item
      *ngFor="let avatar of avatars; let i = index" [ngClass]="{'visible': index===i}">
      <div class="img" [style.backgroundImage]="'url('+avatar.url+')'">
      </div>
    </article>
    <ng-template #infiniteContainer></ng-template>
  </section>

  <ng-template #carouselContent let-avatar let-i="index">
    <article class="item cursor-pointer fade_animation" [ngClass]="{'visible': index===i}">
      <div class="img" [style.backgroundImage]="'url('+avatar.url+')'">
      </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="circle_icon bg-accent" [class.visible]="model.index === model.currentIndex"></div>
  </ng-template>

</ngx-hm-carousel>

(4) Add ts in app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  index = 0;
  speed = 2000;
  infinite = true;
  direction = 'right';
  directionToggle = true;
  autoplay = true;
  avatars = '12345'.split('').map((x, i) => {
    const num = i;
    return {
      url: `https://picsum.photos/600/400/?${num}`,
      title: `${num}`
    };
  });
}

(5) Add scss in app.component.scss

$transition_time: 0.2s;

.transition {
  transition: all $transition_time ease-in-out;
}

.carousel {
  .content {
    display: flex;

    .item {
      width: 100%;
      display: block;
      opacity: 0;
      &.fade_animation {
        transition: opacity 0.295s linear $transition_time;
      }

      &.visible {
        opacity: 1;
      }

      .img {
        width: 100%;
        display: block;
        background-size: cover;
        background-position: center;
        height: 0;
        padding-bottom: 50%;
      }
    }
  }

  .circle_icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: black;
    border: 2px solid;
    opacity: 0.5;

    &.visible {
      opacity: 1;
      color: red;
    }
  }

  .click-area {
    width: 50px;
    text-align: center;
    color: red;

    i {
      font-size: 3em;
    }
  }
}

(6) Our code is done and run application

• npm start