[](https://travis-ci.org/frontendfreelancerdk/ff-carousel)
npm install ff-carousel
bash
$ npm install ff-carousel --save
`
##### Include to your module
AppModule
`typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import library
import {FFCarouselModule} from 'ff-carousel';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify library as an import
FFCarouselModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
Once ff-carousel is imported, you can use its directive in your Angular application:
`xml
`
You should put slides (1), indicators (2) and arrows (3*) as ng-content:
`html
ffCarouselIndicator class="indicator">
>
`
API
Selector: ff-carousel
Exported as: FFCarousel
#### Properties
`typescript
@Input() activeId: number = 0;
`
> The [activeId] attribute set current slide by ID.
> To set third slide as active use:
>
`typescript
@Input() interval: number = 3000;
`
> The [interval] attribute binding the time in milliseconds before slide change
`typescript
@Input() autoplay: boolean = true;
`
> If [autoplay] is false slider will not switch slides
`typescript
@Input() pauseOnHover: boolean = true;
`
> If [pauseOnHover] is true slider will not switch slides while mouse over the slider
`typescript
@Input() keyboard: boolean = true;
`
> If [keyboard] is true allows switch slides using keyboard 'arrow left' and 'arrow right'.
`typescript
@Input() loop: boolean = true;
`
> If [loop] is true allows switch slides from last slide to first slide.
`typescript
@Input() showArrows: boolean = true;
`
> If [showArrows] is true - will show arrows (buttons 'next' and 'previous')
`typescript
@Input() showIndicators: boolean = false;
`
> If [showIndicators] is true - will show slides indicators (slider navigation)
`typescript
@Input() btnOverlay: boolean = false;
`
> If [btnOverlay] is true will wrap arrows (next and prev) with overlay
`typescript
@Output() switched: EventEmitter;
`
> Event triggered when slide was switched and send current active slide ID
#### Methods
`typescript
next: ()=>: number;
`
> You can call this method to show next slide. Method returns active slide ID after switched.
`typescript
prev: ()=>: number;
`
> You can call this method to show previous slide. Method returns active slide ID after switched.
`typescript
setActive: (id: number)=>: void;
`
> For set active slide by ID. E.g from external navigation.
`typescript
stop: ()=>: void;
play: ()=>: void;
`
> stop and play methods are responsible for autoplay.
Example
app.component.html
`html
ffCarouselIndicator class="indicator">
>
`
app.component.css
`css
.imgWrapper {
padding-top: 55%;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
.indicator {
color: white;
}
.arrow{
font-size: 30px;
color: #fff;
}
`
app.component.ts
`typescript
import {Component} from '@angular/core';
@Component({
selector: 'ff-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
images = [1, 2, 3, 4, 5, 6, 7].map(() => https://picsum.photos/900/500?random&t=${Math.random()});
switched(id:number) {
console.log(Switched! Current slide is ${id});
}
}
``