Skip to main content

Responsive Horizontal Scrolling Card Slider in angular

· 3 min read
Kamlesh
Kamlesh
Quality Assurance @TestKarts

Creating a Responsive Horizontal Scrolling Card Slider in Angular​

Introduction​

The aim is to create a reusable Angular component that represents a horizontal card slider with navigation arrows for scrolling through a set of cards.

Features​

We'll maintain the same functionalities as in the React example:

  • Interactive functionality with navigation arrows for scrolling.
  • Detection of the end of the slider for disabling the forward arrow.
  • Default state initialization to the beginning.
  • The component will be reusable and easily customizable.

Step-by-Step Guide​

Step 1: Set up the Angular project​

Create a new Angular project using the Angular CLI:

ng new angular-card-slider

Install Angular Material for styling:

ng add @angular/material

Step 2: Create the CardSlider component​

Generate a new Angular component named CardSlider using the Angular CLI:

ng generate component card-slider

Open the card-slider.component.html file and replace the content with the following code:

<div class="item-slider-container">
  <h4 class="px-3 mb-3 item-title">{{ title }}</h4>
  <div class="item-slider">
    <div (click)="slide(-100)" [ngClass]="{ 'is-disabled-hide': scrollX < 1 }" class="left-arrow-left">
      <mat-icon>keyboard_arrow_left</mat-icon>
    </div>
    <div #scrl (scroll)="scrollCheck()" class="item-container">
      <!-- Card items go here -->
    </div>
    <div (click)="slide(100)" [ngClass]="{ 'is-disabled-hide': scrollEnd }" class="right-arrow-right">
      <mat-icon>keyboard_arrow_right</mat-icon>
    </div>
  </div>
</div>

Step 3: Style the component​

Include the necessary CSS styles in the styles.scss file or your preferred styling file.

styles.scss:

.item-slider-container {
  background-color: #f0f0f0;
  box-shadow: 0px 0px 16px -8px rgb(0 0 0 / 68%);
}

.item-slider-container .item-title {
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  padding-bottom: 15px;
}

.item-slider {
  padding: 0px 5px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.item-slider .item-container {
  display: inline-flex;
  justify-content: flex-start;
  overflow-x: scroll;
  padding: 0px 5px;
}

/* Rest of the styles remain the same */

Step 4: Implement the CardSlider logic​

Open the card-slider.component.ts file and replace the default code with:

card-slider.component.ts:

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-card-slider',
  templateUrl: './card-slider.component.html',
  styleUrls: ['./card-slider.component.scss']
})
export class CardSliderComponent {
  @ViewChild('scrl') scrl: ElementRef | undefined;

  title = 'Top Deals';
  scrollX = 0;
  scrollEnd = false;

  slide(shift: number) {
    if (this.scrl) {
      this.scrl.nativeElement.scrollBy({
        left: shift,
        behavior: 'smooth'
      });

      this.scrl.nativeElement.scrollLeft += shift;
      this.scrollX += shift;

      this.scrollCheck();
    }
  }

  scrollCheck() {
    if (this.scrl) {
      this.scrollX = this.scrl.nativeElement.scrollLeft;
      this.scrollEnd = Math.floor(this.scrl.nativeElement.scrollWidth - this.scrl.nativeElement.scrollLeft) <= this.scrl.nativeElement.offsetWidth;
    }
  }
}

Step 5: Use the CardSlider component in your app​

In your desired Angular component (e.g., app.component.html), import and use the CardSlider component:

app.component.html:

<app-card-slider>
  <!-- Add card items here -->
</app-card-slider>

Replace the <-- Add card items here --> comment with your actual card items.

Conclusion​

By following these steps, you've created a responsive horizontal scrolling card slider in Angular that mimics the functionality of the React-based slider. You can further customize the styles and add more functionalities as per your requirements within your Angular application.