ff-carousel

##Getting started

$3

#####To install this library, run:

``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

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Exercitationem illo mollitia natus nihil
perspiciatis provident quisquam sunt. Ad eaque quibusdam voluptas! Amet autem blanditiis cupiditate
dolores in nulla, omnis praesentium.

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">

>

Some external 'prev' button
Some external 'next' button
`

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});
}
}
``

License

MIT © Frontend Freelancer