🎠angular-sleek-slider

A modern, reusable Angular slider component with infinite scrolling, multi-row support, and responsive layouts. Built with performance and customization in mind, it supports custom item rendering and touch/drag functionality via Hammer.js.

✨ Features

• 📐 Flexible Layouts - Choose from single or multi-row displays to fit any content arrangement
• ↔️ Vertical & Horizontal - Support for both sliding directions
• 📱 Fully Responsive - Adapts beautifully to all screen sizes with customizable breakpoints
• ⚡ Autoplay Magic - Set it and forget it — with adjustable speed for perfect pacing
• 🔄 Infinite Looping - Enjoy smooth, infinite scrolling for a seamless user experience
• 🎮 Custom Controls - Add your own navigation buttons and progress indicators
• 🌍 Global Ready - Right-to-left (RTL) support for full international compatibility
• 👆 Swipe Like a Pro - Intuitive drag-and-swipe support powered by Hammer.js
• ✨ Sleek Transitions - Configurable transition animations with smooth effects
• 🎨 Custom Item Rendering - Full template customization with Angular templates
• 🚀 Feature Complete - Autoplay, dots, arrows, callbacks, and much more
• 🏃‍♂️ Lightweight & Performant - Optimized for speed and efficiency
• 🖼️ Gallery Mode - Image thumbnails as navigation indicators
• 🎨 Custom Indicators - Fully customizable indicator appearance

📦 Quick Start

npm install angular-sleek-slider hammerjs

import { SliderComponent } from '@angular-sleek-slider';

@Component({
  standalone: true,
  imports: [SliderComponent],
  template: `
    <app-slider [sliderItems]="items" [sliderOptions]="options">
      <ng-template #itemTemplate let-item>
        <div class="item">{{ item }}</div>
      </ng-template>
    </app-slider>
  `
})
export class AppComponent {
  items = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  options = {
    numberOfVisibleItems: 4,
    rows: 2,
    infiniteScroll: true,
    stepSize: 1
  };
}

📖 Documentation

For complete documentation, API reference, and advanced examples, visit: 📚 Full Documentation Website

🔧 Requirements

• Angular 16+
• Hammer.js (for drag support)

Add to your main.ts:

import 'hammerjs';

📖 API Reference

📥 Inputs

| Property | Type | Description | Default | |----------|------|-------------|---------| | sliderItems | any[] | Array of items to display | [] | | sliderOptions | SliderOptions | Configuration object | See below | | responsiveOptions | ResponsiveConfig[] | Responsive settings array | [] |

⚙️ SliderOptions

interface SliderOptions {
  numberOfVisibleItems: number;  // Items visible per row (default: 1)
  rows: number;                  // Number of rows (default: 1)
  infiniteScroll: boolean;       // Enable infinite scrolling (default: false)
  stepSize: number;              // Items to scroll per step (default: 1)
  spaceBetween?:number;          // add custom space between items (default value  is 12px )
  animationSpeed: string;        // Animation duration (e.g., '0.6s')
  animation?:'linear' | 'ease-in-out' | 'ease-out' | 'ease-in' | 'ease'; // Default is linear
  indicators?: boolean;          // default is false
  isDraggable?:boolean;          // default is true 
  rtl?:boolean;                  // default is false
  nextButton?:string;         
  prevButton?:string;           
   // nextButton and prevButton used to add Custom next button (custom icon or image with custom position and styling)
  autoplay?: boolean;            // Enable autoplay ( default value is false )
  autoplaySpeed?:number;         // default value is 3s 

}

📱 ResponsiveConfig

⚡ Configuration Logic:

• Responsive Fallback: If responsiveOptions don't define numVisible or numScroll values, the numberOfVisibleItems and stepSize from sliderOptions will be used across all screen sizes
• Default Values: When no responsiveOptions are provided and no numberOfVisibleItems or stepSize are specified, both default to 1
• Auto-Adjustment: If numberOfVisibleItems is smaller than stepSize in sliderOptions, the stepSize will be automatically adjusted to match numberOfVisibleItems (this prevents logical conflicts)

interface ResponsiveConfig {
  breakpoint: string;    // CSS media query (e.g., '1024px')
  numVisible: number;    // Visible items at this breakpoint
  numScroll: number;     // Items to scroll at this breakpoint
}

Template Variable Explanation:

• let-item: This declares a template input variable named item. The app-slider component is expected to pass some data into this template—each item from sliderItems, one at a time. This pattern allows templates to access the context of each item in a loop or projection.

🚨 Troubleshooting

| Issue | Solution | |-------|----------| | Slider not rendering | Ensure sliderItems and sliderOptions are provided | | Drag functionality not working | Add import 'hammerjs'; to main.ts | | Styles missing | Verify CSS classes match sleek-slider.component.scss | | Responsive not working | Check breakpoint syntax in responsiveOptions |