NgxMiniSlider - Angular Image Slider

ngx-mini-slider is an standalone, reusable, responsive and customizable component for Angular 18, 19 and 20.

It is designed to work with signals and Angular zoneless, providing a lightweight, flexible, and accessible image slider.

Installation

If you want to install the latest version (currently 20):

npm install ngx-mini-slider

Angular 19:

npm install ngx-mini-slider@angular19

Angular 18:

npm install ngx-mini-slider@angular18

Basic Usage

The only required input for ngx-mini-slider is [items]. All other inputs are optional and can be used to customize the slider’s behavior and appearance.

items must be an array of objects with the type MiniSliderItem[]. You can import this type directly from the library:

import { MiniSliderItem } from 'ngx-mini-slider';

MiniSliderItem Interface

Here is the exact declaration of the MiniSliderItem type:

export interface MiniSliderItem {
  image_url: string;        // URL of the image to display in the slider item
  title: string;            // Title shown on hover (also used for ARIA accessibility)
  position?: number;        // Optional: number shown in the item if `hasPosition` input is true
  featured?: boolean;       // Optional: shows a star icon if `hasFeatured` input is true
  link: string;             // Link triggered on click or Enter key press
  fragment?: string;        // Optional: anchor ID for routing if `linkType` is 'routerLink'
  target?: '_blank' | '_self'; // Optional: used when `linkType` is 'href'
}

Some notes on optional keys:

• You can include position only for items where you want it.
• featured can be set on some items but omitted on others.
• This flexibility allows you to highlight or number only selected items.

Note: Optional properties can be set individually per item. For example, the first slide could be featured without a position, while the second slide has a position but no featured star.

Basic Usage example

import { MiniSliderItem, NgxMiniSlider } from 'ngx-mini-slider';

@Component({
  imports: [NgxMiniSlider],
  template: `
    <ngx-mini-slider
      [items]="items()"
    />
  `
})
class TestHost {
  items = signal<MiniSliderItem[]>([
   { image_url: 'cover1.jpg', title: 'First Slide', featured: true, link: '/first' },
   { image_url: 'cover2.jpg', title: 'Second Slide', position: 2, link: '/second' },
      // You can mix optional properties freely
   ]);
}

Advanced Usage / Optional Attributes

<ngx-mini-slider
    [items]="items()"
    [linkType]="routerLink"
    [hasPosition]="true"
    [hasFeatured]="true"
    [hasTitle]="true"
    [buttonStyle]="button"
    [rounded]="true"
    [tabIndex]="true"
/>

The component is already optimized for accessibility by default.

Advance custom styles

Example 1: Change button colors

ngx-mini-slider {
  --slider-button-bg: darkblue;
  --slider-button-hover: lightblue;
}

Example 2: Change featured star

ngx-mini-slider {
  --featured-stroke-color: gold;
  --featured-fill-color: yellow;
}

📌 Report or suggest something

Choose the form that best fits your case:

• 🐞 Report a bug
• ✨ Request an improvement for an existing component
• 🧩 Suggest a new component

👉 Or go to the form selector.

License

MIT