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