3D Touchable Carousel Library For Angular 2+

Author: kappys1
Official Page: Go to website
Publish Date: November 30, 2017
License: MIT

Description:

A 3D, lightweight, simple, touch-enabled, vertical/horizontal carousel library Angular 2+.

Installation:

# NPM
$ npm install angular2-carousel --save

Usage:

Import the module into your ngModule.

import {CarouselModule} from "angular2-carousel";

@NgModule({
    imports: [
       CarouselModule
    ] 
})

Add the ‘.item-carousel’ class to the carousel slides as these:

<carousel-component [mode]="'horizontal'" [timeToSlide]="300" #topCarousel>
  <div class="item-carousel">1</div>
  <div class="item-carousel">2</div>
  <div class="item-carousel">3</div>
  <div class="item-carousel">4</div>
  ...
</carousel-component>

Properties:

@Input("morePairSlides") morePairSlides = 1;
@Input("angle") angle = 45;
@Input("ratioScale") ratioScale = 1;
@Input("margin") margin = 20;
@Input("perspective") perspective = 2000;
@Input("endInSlide") endInSlide = true;
@Input("timeToSlide") timeToSlide = 300;
@Input("lockSlides") lockSlides = false;
@Input("initialSlide") initialSlide = 0;
@Input("loop") loop = false;
@Input("mode") axis = "horizontal";

Preview:

3D Touchable Carousel Library For Angular 2+


You Might Be Interested In:

Tags:

Add Comment