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' | 'hover' | 'aside' | | 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>