API Documentation

Inputs (Properties)

Parameter	Type	Default	Description
morePairSlides	number	1	Add slide carousel in both sides
angle	number	45	Angle to distribute the carousel
ratioScale	number	1	Carousel scale ratio
margin	number	0	Margin to separate between carousel slides
perspective	number	2000	Perspective to show the carousel slide
timeToSlide	number	300	Time (in ms) to transalte to carousel slide if transition isn't complete
lockSlides	boolean	false	Block the swiping
initialSlide	number	0	Index number on initial carrousel
mode	string	"horizontal"	Can you init carousel in 'horizontal' or 'vertical' mode

Example

example to use input parameters to init carousel component with 30 angle.

note : you can use a variable to set angle.

<carousel-component [angle]=30 >
    <div class="item-carousel">a</div>
    <div class="item-carousel">b</div>
    <div class="item-carousel">c</div>
    <div class="item-carousel">d</div>
    <div class="item-carousel">e</div>
    <div class="item-carousel">f</div>
</carousel-component>

Preview

if you want the carrousel more little, you can play with ratioScale and perspective parameter

Outputs (Events)

All events return the carousel by argument on callback function, in table you can see what event return carousel only or event too

Event	argument	Description
onInit	carousel	Event will carousel component initialize
onReady	carousel	Event will carousel component is ready
onChangeProperties	Property (SimpleChanges)	Event will properties of carousel changes
onSlideChange	carousel	Event will be fired when slide change
onSlideCentered	carousel	Event will be fired when actual slide are centered
onTransitionStart	js event && carousel	Event will be fired in the beginning of transition. normally when you up finger and the slide isn't collocate
onTransitionEnd	js event && carousel	Event will be fired after transition.
onSlideNextTransitionStart	js event && carousel	Same as "onTransitionStart" but for "forward" direction only
onSlideNextTransitionEnd	js event && carousel	Same as "onTransitionEnd" but for "forward" direction only
onSlidePrevTransitionStart	js event && carousel	Same as "onTransitionEnd" but for "backward" direction only
onSlidePrevTransitionEnd	js event && carousel	Same as "onTransitionEnd" but for "backward" direction only
onTouchMove	js event && carousel	Event will be fired when user move carrousel
onTouchStart	js event && carousel	Event will be fired when user start to move the carousel
onTouchEnd	js event && carousel	Event will be fired when user finish to move the carousel
onSlideMove	hammer event && carousel	Event will be fired when user touch and move finger over carousel and move it
onSlideMoveEnd	hammer event && carousel	Event will be fired when user stop move finger over carousel
onSlideMoveStart	hammer event && carousel	Event will be fired when user start move finger over carousel
onReachBeginning	carousel	Event will be fired when Swiper reach its beginning (initial position)
onReachEnd	carousel	Event will be fired when Swiper reach last slide

Example

example to use output event when slideTransitionEnd.

note : use a function created in your component that where you want to receive the event

<carousel-component (onSlideChangeEnd)="slideChangeEndFn($event)" >
    <div class="item-carousel">a</div>
    <div class="item-carousel">b</div>
    <div class="item-carousel">c</div>
    <div class="item-carousel">d</div>
    <div class="item-carousel">e</div>
    <div class="item-carousel">f</div>
</carousel-component>

Preview

Functions & Properties

After we initialize Carrousel we have its initialized instance in variable (like topCarousel variable in example above) with helpful methods and properties:

functions

Method	Description
slideNext()	Function to move the carousel to next slide
slidePrev()	Function to move the carousel to previous slide
slideTo(index)	Function to move the carousel to index slide
toggleMode()	Change to 'horizontal' or 'vertical' mode
update()	You should call it if you want update the carousel
lockCarousel(value)	Function for lock carousel swiper (True / False)

Properties

the current properties of carousel it's inside carousel variable, the others properties of functions are Input or Outputs parameters

Params	Type	Description
currdeg	number	Actual deg of our carousel
activeIndex	number	Index number of currently active slide
degreesSlides	Array	Degrees where are our carousel slides
items	Array	Elements HTML in carousel
lastIndex	number	Last Index number active slide
lockSlides	Boolean	Carousel swipe status, if is blocked
totalItems	number	Total items in carousel

Example

you need init the component in template setting a identificator like this:

<carousel-component #topCarousel>
    <div class="item-carousel">a</div>
    <div class="item-carousel">b</div>
</carousel-component>

In your component you need get the carousel component like this:

import {Component, ViewChild} from '@angular/core';
import {CarouselComponent} from "angular2-carousel";

@Component({
  selector: 'foo-component',
  templateUrl: 'foo.component.html'
})
export class fooComponent{

   @ViewChild('topCarousel') topCarousel: CarouselComponent;
   constructor() {}

  fooNextSlide() {
    this.topCarousel.slideNext();
  }
}

and you can call the slideNext function like fooNextSlide

Preview

Style Carrousel

You can set your style in your component without problems

Preview

Extra funcionalities

AutoPlay

Autoplay Parameters (Inputs)

Parameter	Type	Default	Description
autoPlay	boolean	false	carousel works alone
delayAutoPlay	number	3000	time (ms) to change next slide with auto play

Autoplay Methods

Method	Description
autoPlayStart()	Start auto play mode
autoPlayStop()	Stop auto play mode