angular-responsive-carousel

Carousel for Angular

A simple solution for horizontal scrolling images with lazy loading.

Live demo can be found on home page.

Installation

Install the npm package.

  npm i angular-responsive-carousel

Import module:

  import {IvyCarouselModule} from 'angular-responsive-carousel';

  @NgModule({
      imports: [IvyCarouselModule]
  })

Usage

Prepare an image array for the carousel. If necessary, specify in the settings the sizes of the cells and the carousel container. And also select the method of arranging images inside the cells using the objectFit property.

<carousel
    [images]="images">
</carousel>

images = [
    {path: 'PATH_TO_IMAGE'},
    ...
]

Properties

height: number
// Carousel height

width: number
// Carousel Width

cellWidth: number | '100%' = 200
// Cell width

overflowCellsLimit: number = 3
// The number of carousel cells that will be stored for in the DOM tree outside the scope.

margin: number = 10
// Cell spacing

minSwipeDistance: number = 50
// Minimum distance for swipe

transitionDuration: number = 200
// Animation duration

transitionTimingFunction: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' = 'ease'
// Smooth animation function

counter: boolean = false
// Counter

counterSeparator: string = " / "
// Counter separator

borderRadius: number
// Border radius for carousel cells

arrows: boolean = true
// Arrows for image navigation

arrowsOutside: boolean
// Arrows on the outside of the carousel container

arrowsTheme: 'light' | 'dark' = 'light'
// Arrow color theme

Browser support

IvyPinch supports the most recent two versions of all major browsers: Chrome (including Android 4.4-10), Firefox, Safari (including iOS 9-13), and Edge.