Angular Slideshow/Carousel

any-carousel

A lightweight, customizable, and responsive carousel/slideshow component for Angular.

any-carousel is designed to work with any type of content — images, cards, logos, testimonials, banners, products, or custom HTML. It provides responsive layouts, autoplay, navigation, touch/swipe gestures, keyboard controls, themes, variants, and transition effects without requiring Angular Material, Bootstrap, or another UI framework.

Demo

Click here for demo

✨ Features

• 📱 Responsive carousel
• 🎞️ Multiple slides per view
• ↔️ Configurable slide gap
• 🔄 Looping navigation
• ▶️ Autoplay
• ⏯️ Play/pause control
• 🖱️ Pause autoplay on hover
• 👆 Touch and swipe navigation
• ⌨️ Keyboard navigation
• ◀️ Previous/next controls
• 🔘 Slide indicators
• ✨ Slide and fade transitions
• 🎨 Built-in themes
• 🧩 Built-in variants
• ♿ Accessibility support
• 🎯 Slide change events
• 🎨 CSS custom property customization
• 📦 Standalone Angular components
• 🚫 No dependency on Angular Material, Bootstrap, or other UI libraries

📦 Installation

Install any-carousel using npm:

npm install any-carousel

🚀 Quick Start

1. Import the Components

Import AnyCarousel and AnyCarouselSlide into your standalone Angular component:

import { Component } from '@angular/core';
import {
  AnyCarousel,
  AnyCarouselSlide
} from 'any-carousel';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    AnyCarousel,
    AnyCarouselSlide
  ],
  templateUrl: './app.html'
})
export class AppComponent {}

2. Add the Carousel

Use <any-carousel> as the carousel container and <any-slide> for individual slides:

<any-carousel>

  <any-slide>
    <div class="slide">
      Slide 1
    </div>
  </any-slide>

  <any-slide>
    <div class="slide">
      Slide 2
    </div>
  </any-slide>

  <any-slide>
    <div class="slide">
      Slide 3
    </div>
  </any-slide>

</any-carousel>

That's all that is required to create a basic carousel.

🧱 Components

any-carousel provides two standalone components.

| Component | Selector | Purpose | | ------------------ | ---------------- | -------------------------------------- | | AnyCarousel | <any-carousel> | Main carousel container and controller | | AnyCarouselSlide | <any-slide> | Individual carousel slide |

The slide component accepts arbitrary Angular content.

For example:

<any-slide>
  <img src="assets/photo.jpg" alt="Example photo">

  <h3>My Slide</h3>

  <p>
    Any Angular content can be placed inside a slide.
  </p>
</any-slide>

🎞️ Multiple Slides Per View

Display multiple slides at the same time using slidesPerView.

<any-carousel
  [slidesPerView]="3"
  [gap]="20"
>
  <any-slide>
    <div class="card">
      Card 1
    </div>
  </any-slide>

  <any-slide>
    <div class="card">
      Card 2
    </div>
  </any-slide>

  <any-slide>
    <div class="card">
      Card 3
    </div>
  </any-slide>

  <any-slide>
    <div class="card">
      Card 4
    </div>
  </any-slide>

  <any-slide>
    <div class="card">
      Card 5
    </div>
  </any-slide>
</any-carousel>

For example:

slidesPerView = 1

┌──────────────────────┐
│       Slide 1        │
└──────────────────────┘

With:

slidesPerView = 3

┌──────────┬──────────┬──────────┐
│ Slide 1  │ Slide 2  │ Slide 3  │
└──────────┴──────────┴──────────┘

📏 Slide Gap

Use gap to control the space between slides.

<any-carousel
  [slidesPerView]="3"
  [gap]="24"
>
  ...
</any-carousel>

The value is specified in pixels.

Examples:

gap = 0
gap = 10
gap = 20
gap = 32

📱 Responsive Carousel

Configure different slide counts and gaps at different viewport widths.

Component

responsive = {
  1200: {
    slidesPerView: 4,
    gap: 24
  },

  992: {
    slidesPerView: 3,
    gap: 20
  },

  768: {
    slidesPerView: 2,
    gap: 16
  },

  480: {
    slidesPerView: 1,
    gap: 10
  }
};

Template

<any-carousel
  [slidesPerView]="5"
  [gap]="24"
  [responsive]="responsive"
>
  ...
</any-carousel>

The carousel automatically selects the appropriate configuration based on the viewport width.

Partial Configuration

Both slidesPerView and gap are optional inside a breakpoint.

responsive = {
  768: {
    slidesPerView: 2
  },

  480: {
    slidesPerView: 1,
    gap: 10
  }
};

The base slidesPerView and gap values are used whenever a responsive configuration does not override them.

🔄 Loop

Looping is enabled by default.

<any-carousel [loop]="true">

Disable looping:

<any-carousel [loop]="false">

When looping is disabled, navigation stops at the first and last available position.

▶️ Autoplay

Enable automatic slide changes with autoplay.

<any-carousel
  [autoplay]="true"
  [interval]="3000"
>
  ...
</any-carousel>

interval is specified in milliseconds.

| Value | Duration | | -----: | --------: | | 1000 | 1 second | | 3000 | 3 seconds | | 5000 | 5 seconds |

Default values:

autoplay = false;
interval = 5000;

🖱️ Pause on Hover

Pause autoplay while the pointer is over the carousel.

<any-carousel
  [autoplay]="true"
  [pauseOnHover]="true"
>
  ...
</any-carousel>

This is useful when users need time to interact with the current slide.

⏯️ Play / Pause Control

Display a play/pause button:

<any-carousel
  [autoplay]="true"
  [showPlayPause]="true"
>
  ...
</any-carousel>

Users can manually pause and resume autoplay.

◀️ Navigation Controls

Previous and next controls are enabled by default.

<any-carousel
  [showControls]="true"
>
  ...
</any-carousel>

Disable them:

<any-carousel
  [showControls]="false"
>
  ...
</any-carousel>

Navigation controls are automatically hidden when all slides fit within the available viewport.

🔘 Indicators

Indicators are enabled by default.

<any-carousel
  [showIndicators]="true"
>
  ...
</any-carousel>

Disable them:

<any-carousel
  [showIndicators]="false"
>
  ...
</any-carousel>

When multiple slides are visible, indicators represent navigation positions, rather than individual slides.

For example:

5 total slides
3 slides visible

● ● ●

✨ Transitions

any-carousel currently supports two transition modes:

• slide
• fade

Slide

<any-carousel
  transition="slide"
>
  ...
</any-carousel>

Slide is the default transition.

Fade

<any-carousel
  transition="fade"
>
  ...
</any-carousel>

Fade mode displays one active slide at a time and transitions between slides using a fade effect.

Fade Example

<any-carousel
  transition="fade"
  [autoplay]="true"
  [interval]="4000"
>
  <any-slide>
    <img
      src="assets/slide-1.jpg"
      alt="First slide"
    >
  </any-slide>

  <any-slide>
    <img
      src="assets/slide-2.jpg"
      alt="Second slide"
    >
  </any-slide>

  <any-slide>
    <img
      src="assets/slide-3.jpg"
      alt="Third slide"
    >
  </any-slide>
</any-carousel>

👆 Touch & Swipe

Touch devices are supported automatically.

Users can:

• Swipe left → next slide
• Swipe right → previous slide

No additional configuration is required.

The carousel preserves normal vertical page scrolling while supporting horizontal swipe gestures.

⌨️ Keyboard Navigation

The carousel supports keyboard navigation when focused.

| Key | Action | | ------------- | -------------- | | Arrow Right | Next slide | | Arrow Left | Previous slide | | Home | First slide | | End | Last slide |

The carousel also provides visible focus styling for keyboard users.

🎨 Themes

Four built-in themes are available.

Default

<any-carousel theme="default">
  ...
</any-carousel>

The general-purpose default theme.

Dark

<any-carousel theme="dark">
  ...
</any-carousel>

Suitable for dark backgrounds and image-heavy carousels.

Minimal

<any-carousel theme="minimal">
  ...
</any-carousel>

A clean and subtle appearance.

Modern

<any-carousel theme="modern">
  ...
</any-carousel>

A contemporary appearance with refined controls.

Example

<any-carousel
  theme="modern"
  [slidesPerView]="3"
  [gap]="20"
>
  ...
</any-carousel>

🧩 Variants

Variants provide predefined styling for common carousel use cases.

Default

<any-carousel variant="default">
  ...
</any-carousel>

General-purpose carousel.

Hero

<any-carousel variant="hero">
  ...
</any-carousel>

Useful for:

• Hero banners
• Promotional sections
• Large image slides
• Landing page content

Card

<any-carousel variant="card">
  ...
</any-carousel>

Useful for:

• Product cards
• Blog cards
• Service cards
• Content cards

Example:

<any-carousel
  variant="card"
  [slidesPerView]="3"
  [gap]="20"
>
  <any-slide>
    <article class="card">
      <h3>Product One</h3>
      <p>Product description.</p>
    </article>
  </any-slide>

  <any-slide>
    <article class="card">
      <h3>Product Two</h3>
      <p>Product description.</p>
    </article>
  </any-slide>

  <any-slide>
    <article class="card">
      <h3>Product Three</h3>
      <p>Product description.</p>
    </article>
  </any-slide>
</any-carousel>

Logo

<any-carousel variant="logo">
  ...
</any-carousel>

Designed for:

• Client logos
• Partner logos
• Sponsor logos
• Brand logos

Example:

<any-carousel
  variant="logo"
  theme="minimal"
  [slidesPerView]="5"
  [gap]="24"
>
  <any-slide>
    <img
      src="assets/logos/company-1.svg"
      alt="Company 1"
    >
  </any-slide>

  <any-slide>
    <img
      src="assets/logos/company-2.svg"
      alt="Company 2"
    >
  </any-slide>

  <any-slide>
    <img
      src="assets/logos/company-3.svg"
      alt="Company 3"
    >
  </any-slide>
</any-carousel>

Testimonial

<any-carousel variant="testimonial">
  ...
</any-carousel>

Useful for:

• Customer testimonials
• Reviews
• Quotes
• Customer stories

🎯 Starting Slide

Use startIndex to specify the initial slide.

<any-carousel
  [startIndex]="2"
>
  ...
</any-carousel>

Indexes start at 0.

0 → First slide
1 → Second slide
2 → Third slide

📡 Slide Change Event

Listen for slide changes using slideChange.

<any-carousel
  (slideChange)="onSlideChange($event)"
>
  ...
</any-carousel>

Component:

onSlideChange(index: number): void {
  console.log('Current slide:', index);
}

The emitted value is the current slide index.

🎨 Custom Styling

any-carousel uses CSS custom properties to make appearance customization easy.

You can override the default values from your application:

any-carousel {
  --any-carousel-control-size: 48px;

  --any-carousel-control-background:
    rgba(0, 0, 0, 0.5);

  --any-carousel-control-hover-background:
    rgba(0, 0, 0, 0.8);

  --any-carousel-control-color:
    #ffffff;

  --any-carousel-indicator-size: 10px;

  --any-carousel-indicator-color:
    rgba(255, 255, 255, 0.5);

  --any-carousel-indicator-active-color:
    #ffffff;

  --any-carousel-transition-duration:
    500ms;
}

This allows application-level customization without modifying the library source code.

⚙️ API Reference

AnyCarousel Inputs

| Input | Type | Default | Description | | ---------------- | -------------------------- | ----------: | --------------------------------- | | variant | CarouselVariant | 'default' | Visual carousel variant | | theme | CarouselTheme | 'default' | Built-in theme | | transition | CarouselTransition | 'slide' | Transition type | | slidesPerView | number | 1 | Number of visible slides | | gap | number | 0 | Gap between slides in pixels | | responsive | CarouselResponsiveConfig | undefined | Responsive settings | | loop | boolean | true | Enable looping | | startIndex | number | 0 | Initial slide index | | showControls | boolean | true | Show navigation controls | | showIndicators | boolean | true | Show indicators | | autoplay | boolean | false | Enable autoplay | | interval | number | 5000 | Autoplay interval in milliseconds | | pauseOnHover | boolean | true | Pause autoplay on hover | | showPlayPause | boolean | false | Show play/pause control |

📤 Outputs

slideChange

slideChange emits the current carousel position whenever the active slide changes.

@Output()
slideChange = new EventEmitter<number>();

Example:

<any-carousel
  (slideChange)="handleSlideChange($event)"
>
  ...
</any-carousel>

handleSlideChange(index: number): void {
  console.log('Active slide:', index);
}

🧱 Responsive Configuration

The responsive configuration uses breakpoint keys in pixels.

responsive = {
  1200: {
    slidesPerView: 4,
    gap: 24
  },

  992: {
    slidesPerView: 3,
    gap: 20
  },

  768: {
    slidesPerView: 2,
    gap: 16
  },

  480: {
    slidesPerView: 1,
    gap: 10
  }
};

Both slidesPerView and gap are optional:

responsive = {
  768: {
    slidesPerView: 2
  },

  480: {
    slidesPerView: 1,
    gap: 10
  }
};

You can also import the type:

import {
  CarouselResponsiveConfig
} from 'any-carousel';

responsive: CarouselResponsiveConfig = {
  768: {
    slidesPerView: 2,
    gap: 16
  },

  480: {
    slidesPerView: 1,
    gap: 10
  }
};

🧩 TypeScript Types

The following types are exported from the package:

import {
  CarouselVariant,
  CarouselTheme,
  CarouselTransition,
  CarouselBreakpoint,
  CarouselResponsiveConfig
} from 'any-carousel';

CarouselVariant

type CarouselVariant =
  | 'default'
  | 'hero'
  | 'card'
  | 'logo'
  | 'testimonial';

CarouselTheme

type CarouselTheme =
  | 'default'
  | 'dark'
  | 'minimal'
  | 'modern';

CarouselTransition

type CarouselTransition =
  | 'slide'
  | 'fade';

CarouselBreakpoint

interface CarouselBreakpoint {
  slidesPerView?: number;
  gap?: number;
}

CarouselResponsiveConfig

interface CarouselResponsiveConfig {
  [breakpoint: number]: CarouselBreakpoint;
}

♿ Accessibility

any-carousel includes several accessibility features:

• Semantic carousel region
• ARIA carousel descriptions
• Accessible navigation buttons
• Accessible indicators
• Keyboard navigation
• Visible keyboard focus
• Slide visibility information
• Reduced-motion support

The carousel respects the user's:

prefers-reduced-motion

preference and reduces or disables animation when requested by the operating system or browser.

For images, always provide meaningful alternative text:

<img
  src="assets/product.jpg"
  alt="Red running shoes"
>

📐 Custom Slide Content

AnyCarouselSlide does not impose a specific layout on your content.

You can use plain HTML:

<any-slide>
  <h2>Hello World</h2>
  <p>Simple carousel content.</p>
</any-slide>

Images:

<any-slide>
  <img
    src="assets/banner.jpg"
    alt="Promotional banner"
  >
</any-slide>

Cards:

<any-slide>
  <article class="product-card">
    <img
      src="assets/product.jpg"
      alt="Product"
    >

    <h3>Product Name</h3>

    <p>Product description.</p>

    <button>
      View Product
    </button>
  </article>
</any-slide>

Angular components:

<any-slide>
  <app-product-card
    [product]="product"
  />
</any-slide>

This makes any-carousel suitable for virtually any carousel use case.

🌐 Complete Example

Component

import { Component } from '@angular/core';

import {
  AnyCarousel,
  AnyCarouselSlide,
  CarouselResponsiveConfig
} from 'any-carousel';

@Component({
  selector: 'app-products',
  standalone: true,
  imports: [
    AnyCarousel,
    AnyCarouselSlide
  ],
  templateUrl: './products.html'
})
export class ProductsComponent {

  responsive: CarouselResponsiveConfig = {
    1200: {
      slidesPerView: 4,
      gap: 24
    },

    992: {
      slidesPerView: 3,
      gap: 20
    },

    768: {
      slidesPerView: 2,
      gap: 16
    },

    480: {
      slidesPerView: 1,
      gap: 10
    }
  };

  onSlideChange(index: number): void {
    console.log('Current slide:', index);
  }
}

Template

<any-carousel
  variant="card"
  theme="modern"

  [slidesPerView]="4"
  [gap]="24"
  [responsive]="responsive"

  [loop]="true"

  [showControls]="true"
  [showIndicators]="true"
  [showPlayPause]="true"

  [autoplay]="true"
  [interval]="4000"
  [pauseOnHover]="true"

  transition="slide"

  (slideChange)="onSlideChange($event)"
>
  <any-slide>
    <article class="product-card">
      <h3>Product One</h3>
      <p>Product description.</p>
    </article>
  </any-slide>

  <any-slide>
    <article class="product-card">
      <h3>Product Two</h3>
      <p>Product description.</p>
    </article>
  </any-slide>

  <any-slide>
    <article class="product-card">
      <h3>Product Three</h3>
      <p>Product description.</p>
    </article>
  </any-slide>

  <any-slide>
    <article class="product-card">
      <h3>Product Four</h3>
      <p>Product description.</p>
    </article>
  </any-slide>
</any-carousel>

📦 Angular Compatibility

The initial release targets:

• Angular 21+
• Standalone Angular components
• TypeScript 5.9+
• RxJS 7+

any-carousel does not require:

• Angular Material
• Bootstrap
• Tailwind CSS
• jQuery
• Any external carousel/slideshow library

🛣️ Roadmap

Planned improvements include:

• [ ] Custom navigation controls
• [ ] Custom indicator templates
• [ ] Custom carousel templates
• [ ] Advanced drag interaction
• [ ] Improved swipe physics
• [ ] RTL support
• [ ] Vertical carousel
• [ ] Center-mode carousel
• [ ] Infinite clone-based looping
• [ ] Lazy loading
• [ ] More built-in themes
• [ ] More carousel variants
• [ ] Advanced accessibility improvements
• [ ] Unit and integration tests
• [ ] Interactive documentation
• [ ] Angular version compatibility improvements

📄 License

MIT License

Copyright © 2026 Bijay Josi

⭐ Support

Built with ❤️ for Angular developers.