carousel-angular

Simple Angular carousel component

Demo

Live demo.

About

This is a fork version of ivylaboratory/angular-carousel with the following changes:

• Navigation arrows new design
• Bug fixes:
  • Fix scrolling to previous item scrolls to start only
  • Fix when drag & drop event starts on inner content (drag & drop is now blocked)
  • Fix autoplay stop when hovering carousel
• Removed 'images' and 'loop' functionality to reduce bundle size ('loop' never worked before without 'images')
• Changed default settings
• Performed .sass and .ts linting, overall code cleanup (removing unused members) and modernization
• Bundle size is reduced to 529 kB unpacked against 814 kB before
• Dependency versions upgrade to fit Angular 14

Installation

Install the npm package.

  npm i carousel-angular

Import module:

  import {IvyCarouselModule} from 'carousel-angular';

  @NgModule({
      imports: [IvyCarouselModule]
  })

Usage

Put the contents of your cells in containers with the carousel-cell class.

<carousel>
    <div class="carousel-cell">
        <img src="path_to_image"> <!-- Or any other HTML content -->
    </div>
    <div class="carousel-cell">
        ...
</carousel>

Credits

Please see angular-carousel author's page respectively: drozhzhin-n-e