0.0.3 • Published 4 years ago

ngx-repeater

Licence

—

Version

0.0.3

Deps

Size

78 kB

Vulns

Weekly

Summary Dependency Versions

NgxRepeater

Features

Angular slider\carousel

Install

npm install ngx-repeater --save

Setup

step 1: add NgxRepeaterModule to app NgModule

import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { NgxRepeaterModule } from 'ngx-repeater';

@NgModule({
  imports: [
    CommonModule,
    NgxRepeaterModule 
  ],
})
class MainModule {}

step 2: wrap your slides by ngx-repeater tag and add #sliderItem reference to every slide

<ngx-repeater>
  <p #sliderItem>1</p>
  <p #sliderItem>2</p>
  <p #sliderItem>3</p>
  <p #sliderItem>4</p>
  <p #sliderItem>5</p>
  <p #sliderItem>6</p>
</ngx-repeater>

step 3: If needed add required inputs (all are optional)

Input	description	Default	Value type
sliderWidth	Slider width	100% of parent element width	`number`
sliderHeight	Slider height	100% of parent element height	`number`
itemWidth	slide width	100% of slider width	`number`
itemHeight	slide height	100% of slider height	`number`
navPosition	control butttons position	`over`	'over'
gap	gap in px between slides	`20`	`number`

<ngx-repeater
  [sliderWidth]="500"
  [navPosition]="'aside'"
  [gap]="50"
>
  <p #sliderItem>1</p>
  <p #sliderItem>2</p>
  <p #sliderItem>3</p>
  <p #sliderItem>4</p>
  <p #sliderItem>5</p>
  <p #sliderItem>6</p>
</ngx-repeater>