##Getting started
#####To install this library, run:
$ npm install ff-carousel --save
AppModule
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:
<!-- You can now use library component in your.component.html -->
<ff-carousel></ff-carousel>
You should put slides (1*), indicators (2*) and arrows (3*) as ng-content:
<ff-carousel>
<!-- (1) You should mark you slide with *ffCarouselItem directive to let ff-carousel know that it's slide -->
<!-- Then you can make your own structure and styles for slide -->
<div *ffCarouselItem class="slide-wrapper">
<img src="first_slide_image.jpg" class="slide-img">
<h2 class="slide-header"></h2>
<p class="slide-description">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.</p>
</div>
<!-- (2) If you want to use slide indicators you need to add your indicator element
and mark it as indicator with *ffCarouselIndicator directive. -->
<div *ffCarouselIndicator class="indicator">*</div>
<!-- (3) Also if you want to use arrows - just add RIGHT arrow element and mark it with *ffCarouselArrow directive-->
<div *ffCarouselArrow class="arrow"> ></div>
</ff-carousel>
Selector: ff-carousel
Exported as: FFCarousel
@Input() activeId: number = 0;
The [activeId] attribute set current slide by ID. To set third slide as active use:
@Input() interval: number = 3000;
The [interval] attribute binding the time in milliseconds before slide change
@Input() autoplay: boolean = true;
If [autoplay] is false slider will not switch slides
@Input() pauseOnHover: boolean = true;
If [pauseOnHover] is true slider will not switch slides while mouse over the slider
@Input() keyboard: boolean = true;
If [keyboard] is true allows switch slides using keyboard 'arrow left' and 'arrow right'.
@Input() loop: boolean = true;
If [loop] is true allows switch slides from last slide to first slide.
@Input() showArrows: boolean = true;
If [showArrows] is true - will show arrows (buttons 'next' and 'previous')
@Input() showIndicators: boolean = false;
If [showIndicators] is true - will show slides indicators (slider navigation)
@Input() btnOverlay: boolean = false;
If [btnOverlay] is true will wrap arrows (next and prev) with overlay
@Output() switched: EventEmitter<number>;
Event triggered when slide was switched and send current active slide ID
next: ()=>: number;
You can call this method to show next slide. Method returns active slide ID after switched.
prev: ()=>: number;
You can call this method to show previous slide. Method returns active slide ID after switched.
setActive: (id: number)=>: void;
For set active slide by ID. E.g from external navigation.
stop: ()=>: void;
play: ()=>: void;
stop and play methods are responsible for autoplay.
app.component.html
<ff-carousel [btnOverlay]="true" (switched)="switched()" #myCarousel="FFCarousel">
<ng-container *ngFor="let img of images">
<div *ffCarouselItem class="imgWrapper">
<img src="{{img}}" alt="">
</div>
</ng-container>
<div *ffCarouselIndicator class="indicator">*</div>
<div *ffCarouselArrow class="arrow"> ></div>
</ff-carousel>
<button (click)="myCarousel.prev()">Some external 'prev' button</button>
<button (click)="myCarousel.next()">Some external 'next' button</button>
app.component.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
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}`);
}
}
MIT © Frontend Freelancer