@silicic/scroll-gallery-ng
TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published

@silicic/scroll-gallery-ng

A scroll-able gallery component.

Demo

Installation

Install with npm:

npm install @silicic/scroll-gallery-ng

Usage

Import ScrollGalleryModule:

@NgModule({
  imports: [ScrollGalleryModule]
})
export class AppModule {}

And wrap si-gallery-item with si-scroll-gallery like this:

<si-scroll-gallery
  [activatedItemPosition]="'center'"
  [bounceRate]="400"
  [gap]="120"
  [scaleRate]="1.1"
>
  <si-gallery-item>
    A
  </si-gallery-item>
  <si-gallery-item>
    B
  </si-gallery-item>
  <si-gallery-item>
    C
  </si-gallery-item>
</si-scroll-gallery>

API

si-scroll-gallery

Property Description Type Default Value
[gap] Gap between two si-gallery-item number 120
[scaleRate] Scale ratio of activated si-gallery-item number 1.2
[activatedItemPosition] Left offset of the activated item to the left border `number 'center'`
[bounceRate] Bouncing flexibility of the component when it's scrolled to the first or last number 100
(activatedChanged) The currently activated item changed. Subject<void> -
(draggingStarted) Subject<void> -
(dragging) Subject<PointerVector> -
(draggingEnd) Subject<PointerVector> -

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i @silicic/scroll-gallery-ng

Weekly Downloads

0

Version

0.0.1

License

none

Unpacked Size

1.33 MB

Total Files

39

Last publish

Collaborators

  • wendzhue