Skip to main content

​
Overview

Carousel is an enterprise-grade carousel component with 100+ features including multiple transition effects, virtual scrolling, autoplay, and full accessibility support.

​
Import

import { MagaryCarouselComponent } from 'ng-magary';

​
Basic Usage

<magary-carousel
  [value]="products"
  [(page)]="currentPage"
  [numVisible]="3"
  [numScroll]="1">
  
  <ng-template #item let-product>
    <div class="product-card">
      <img [src]="product.image" [alt]="product.name">
      <h3>{{ product.name }}</h3>
      <p>{{ product.price | currency }}</p>
    </div>
  </ng-template>
</magary-carousel>

​
With Autoplay

<magary-carousel
  [value]="items"
  [numVisible]="1"
  [autoplayInterval]="3000"
  [loop]="true"
  [showProgress]="true"
  [pauseOnHover]="true">
  
  <ng-template #item let-item>
    <img [src]="item.image" [alt]="item.title">
  </ng-template>
</magary-carousel>

​
Transition Effects

<magary-carousel
  [value]="items"
  [effect]="'slide'">
</magary-carousel>

​
Responsive Configuration

responsiveOptions = [
  {
    breakpoint: 1024,
    numVisible: 3,
    numScroll: 1
  },
  {
    breakpoint: 768,
    numVisible: 2,
    numScroll: 1
  },
  {
    breakpoint: 560,
    numVisible: 1,
    numScroll: 1
  }
];

<magary-carousel
  [value]="products"
  [numVisible]="4"
  [responsiveOptions]="responsiveOptions">
</magary-carousel>

<magary-carousel
  [value]="items"
  [orientation]="'vertical'"
  [verticalViewPortHeight]="'400px'">
</magary-carousel>

​
Input Properties

​
Core

​
value
T[]
default:"[]"
Array of items to display
​
page
number
default:"0"
Current page (two-way binding)
​
numVisible
number
default:"1"
Number of items visible at once
​
numScroll
number
default:"1"
Number of items to scroll per navigation
​
spaceBetween
number
default:"0"
Gap between items in pixels
​
responsiveOptions
CarouselResponsiveOptions[]
Responsive configuration per breakpoint

​
Layout

​
orientation
'horizontal' | 'vertical'
default:"'horizontal'"
Carousel orientation
​
direction
'ltr' | 'rtl'
default:"'ltr'"
Text direction (RTL support)
​
width
string
Width constraint
​
verticalViewPortHeight
string
default:"'300px'"
Height for vertical carousels

​
Effects

​
effect
'slide' | 'fade' | 'cube' | 'flip' | 'coverflow' | 'cards'
default:"'slide'"
Visual transition effect
​
transitionDuration
number
default:"300"
Transition duration in milliseconds
​
transitionTimingFunction
string
default:"'cubic-bezier(0.4, 0, 0.2, 1)'"
CSS easing function
​
circular
boolean
default:"false"
Enable circular navigation (jump to start/end)
​
loop
boolean
default:"false"
Enable true infinite loop
​
showNavigators
boolean
default:"true"
Show navigation buttons
​
showIndicators
boolean
default:"true"
Show page indicators
​
indicatorStyle
'dots' | 'lines' | 'thumbnails' | 'fraction' | 'progress'
default:"'dots'"
Style of page indicators

​
Interaction

​
swipeable
boolean
default:"true"
Enable touch/mouse swipe
​
mousewheel
boolean
default:"false"
Enable mousewheel navigation
​
keyboard
boolean
default:"true"
Enable keyboard navigation

​
Autoplay

​
autoplayInterval
number
default:"0"
Autoplay interval in ms (0 = disabled)
​
pauseOnHover
boolean
default:"true"
Pause autoplay on hover
​
showProgress
boolean
default:"false"
Show autoplay progress indicator

​
Performance

​
virtual
boolean
default:"false"
Enable virtual scrolling for large datasets
​
lazyLoad
boolean
default:"true"
Lazy load items

​
Output Events

​
pageChange
EventEmitter<number>
Emitted when page changes
​
slideChange
EventEmitter<CarouselSlideEvent<T>>
Emitted before slide change
​
slideChanged
EventEmitter<CarouselSlideEvent<T>>
Emitted after slide change completes
​
itemClick
EventEmitter<{item: T, index: number}>
Emitted when item is clicked

​
Methods

​
next()
void
Navigate to next slide
​
previous()
void
Navigate to previous slide
​
goToPage(index)
void
Navigate to specific page

​
Features

  • 100+ features: Comprehensive carousel solution
  • Multiple effects: Slide, fade, cube, flip, coverflow, cards
  • Virtual scrolling: Handle thousands of items
  • Responsive: Breakpoint-based configuration
  • Autoplay: With progress indicators
  • Touch gestures: Swipe, pinch, momentum
  • Keyboard nav: Full keyboard support
  • RTL support: Right-to-left languages
  • Accessibility: WCAG compliant
  • Performance: Optimized rendering

​
Accessibility

  • ARIA roles and labels
  • Keyboard navigation (Arrow keys, Home, End, Page Up/Down)
  • Focus management
  • Screen reader support
  • Respects prefers-reduced-motion

Build docs developers (and LLMs) love

Get started for freeTalk to us