Angular 2+的3D可触摸轮播图库

Angular 2+的3D可触摸轮播图库
插件名称 angular2-carousel
发布时间 2020年7月17日
插件作者 kappys1

3D,轻便,简单,支持触摸的垂直/水平轮播库Angular 2+。

安装:

# NPM
$ npm install angular2-carousel --save

用法:

将模块导入到ngModule中。

import {CarouselModule} from "angular2-carousel";

@NgModule({
    imports: [
       CarouselModule
    ] 
})

将“ .item-carousel”类添加到轮播幻灯片中,如下所示:

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

特性:

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