Fr-Carousel

Fr-Carousel is a friendly angular carousel component and it supports swipe feature for touch devices.

Demo

https://longhaine.github.io/fr-demos/fr-carousel

Installation

npm install fr-carousel --save

Once installed you need to import the module:

import  {FrCarouselModule}  from  'fr-carousel';

@NgModule({

 ...

 imports:  [FrCarouselModule,  ...],

 ...

})

export class  AppModule  {

}

Usage

<fr-carousel>
	<ng-template FrSlide>
		...
	</ng-template>
	<ng-template FrSlide>
		...
	</ng-template>
	<ng-template FrSlide>
		...
	</ng-template>
</fr-carousel>

FrCarousel

selector: fr-carousel

Inputs

Input	Type	Default	Description
showNavigationArrows	boolean	true	if true, 'previous' and 'next' navigation arrows will be visible on the slide.
showNavigationIndicators	boolean	true	If true, navigation indicators at the bottom of the slide will be visible.
keyboard	boolean	true	If true, allows to interact with carousel using keyboard 'arrow left' and 'arrow right'.
interval	number	5000	Time in milliseconds before the next slide is shown.
animationDuration	number	500	Time in milliseconds of sliding animation.
pauseOnHover	boolean	true	If true, will pause slide switching when mouse cursor hovers the slide.

Methods

Method	Description
prev	prev() => void Navigates to the previous slide.
next	next() => void Navigates to the next slide.
pause	pause() => void Pauses cycling through the slides.
cycle	cycle() => void Restarts cycling through the slides from left to right.

FrSlide

selector: ng-template[FrSlide]

Inputs

Input	Type	Description
id	string	Slide id that must be unique for the entire document. If not provided, will be generated in the fr-slide-x format.

FrCarouselConfig

A configuration service for the FrCarousel component.

You can inject this service, typically in your root component, and customize its properties to provide default values for all carousels used in the application.

interval animationDuration keyboard pauseOnHover showNavigationArrows showNavigationIndicators