NgHorizontalScroller

ng-horizontal-scroller is a lightweight, fully customizable, and responsive horizontal infinite scroller component for Angular. It’s perfect for displaying logos, images, or content in a smooth and continuous loop.

• 👉 live demo

Installation

npm i ng-horizontal-scroller

Usage

Import the Component (Standalone or NgModule)

import { HorizontalScrollerComponent } from 'ng-horizontal-scroller';

<ng-horizontal-scroller
  [items]="logos"
  [speed]="25"
></ng-horizontal-scroller>

Inputs

Example Data

Define your array like this for example

logos = [
  {
    thumbnail: 'https://upload.wikimedia.org/wikipedia/commons/c/cf/Angular_full_color_logo.svg',
    description: 'Angular',
    url: 'https://angular.io'
  },
  {
    thumbnail: 'https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg',
    description: 'Vue.js',
    url: 'https://vuejs.org'
  },
  {
    thumbnail: 'https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg',
    description: 'React',
    url: 'https://react.dev'
  }
];

⚠️ Tailwind CSS Requirement

This library (ng-horizontal-scroller) uses Tailwind CSS for styling. If you're using Tailwind v4+ with Angular and encounter issues where styles from the component are not being applied, we recommend using Tailwind @source directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection:

✅ Quick Fix, use @source in your global styles

@import "tailwindcss";
@source  "../node_modules/ng-horizontal-scroller/";

@source

🛠️ for integrating tailwind in your angular project, follow these steps official documentation

Contributuion

Contributions are welcome and appreciated! If you'd like to improve this component, fix a bug, or add new features, feel free to open an issue or submit a pull request.