ff-carousel
Getting started
Installation
To install this library, run:
$ npm install ff-carousel --save
Include to your module
AppModule
;; ; // Import library;
Once ff-carousel is imported, you can use its directive in your Angular application:
<!-- You can now use library component in your.component.html -->
You should put slides (1*), indicators (2*) and arrows (3*) as ng-content:
<!-- (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 --> 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. <!-- (2) If you want to use slide indicators you need to add your indicator element and mark it as indicator with *ffCarouselIndicator directive. --> *<!-- (3) Also if you want to use arrows - just add RIGHT arrow element and mark it with *ffCarouselArrow directive--> >
API
Selector: ff-carousel
Exported as: FFCarousel
Properties
activeId: number = 0;
The [activeId] attribute set current slide by ID. To set third slide as active use:
interval: number = 3000;
The [interval] attribute binding the time in milliseconds before slide change
autoplay: boolean = true;
If [autoplay] is false slider will not switch slides
pauseOnHover: boolean = true;
If [pauseOnHover] is true slider will not switch slides while mouse over the slider
keyboard: boolean = true;
If [keyboard] is true allows switch slides using keyboard 'arrow left' and 'arrow right'.
loop: boolean = true;
If [loop] is true allows switch slides from last slide to first slide.
showArrows: boolean = true;
If [showArrows] is true - will show arrows (buttons 'next' and 'previous')
showIndicators: boolean = false;
If [showIndicators] is true - will show slides indicators (slider navigation)
btnOverlay: boolean = false;
If [btnOverlay] is true will wrap arrows (next and prev) with overlay
switched: EventEmitter<number>;
Event triggered when slide was switched and send current active slide ID
Methods
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:: void;
For set active slide by ID. E.g from external navigation.
stop:: void; play:: void;
stop and play methods are responsible for autoplay.
Example
app.component.html
* > Some external 'prev' buttonSome external 'next' button
app.component.css
app.component.ts
;
License
MIT © Frontend Freelancer