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.