# @iladiro/angular-slider

> Angular Slider plugin is flexible and easily customizable

Latest version **0.0.12** (published 2023-11-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @iladiro/angular-slider
pnpm add @iladiro/angular-slider
yarn add @iladiro/angular-slider
bun add @iladiro/angular-slider
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.12 |
| Published | 2023-11-03 |
| First published | 2023-10-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 231.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Iladiro |
| Maintainers | iladiro |
| Keywords | slider, npm, package, iladiro, typescript, angular 15, angular |

## Links

- npm: https://www.npmjs.com/package/@iladiro/angular-slider
- Repository: https://github.com/iladiro/angular-slider
- Homepage: https://github.com/iladiro/angular-slider#readme
- Issues: https://github.com/iladiro/angular-slider/issues
- npm.io page: https://npm.io/package/@iladiro/angular-slider

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.0.12 (latest) — 2023-11-03
- 0.0.11 — 2023-11-03
- 0.0.10 — 2023-11-03
- 0.0.9 — 2023-11-03
- 0.0.8 — 2023-11-03
- 0.0.7 — 2023-10-27
- 0.0.6 — 2023-10-27
- 0.0.5 — 2023-10-27
- 0.0.4 — 2023-10-27
- 0.0.3 — 2023-10-27
- 0.0.2 — 2023-10-27
- 0.0.1 — 2023-10-27

## README

# IladiroAngularSliderLibrary Documentation

This library is compatible with Angular versions >=15.0.0

Note: Please use version from 0.0.12, which is compatible with Angular versions >=15.0.0, older versions are only compatible with Angular version ^15.2.0. It was my mistake! Thank you<br><br>

Angular Slider plugin is flexible and easily customizable

## Description
You can use the default template or pass your custom template following some configurations.

![Alt text](./projects/iladiro-angular-slider-library/screenshots/default-card.png?raw=true "Default Card")

## Before start
1. npm i @iladiro/angular-slider<br>
1. Import ```IladiroAngularSliderLibraryModule``` into your module from ```import { IladiroAngularSliderLibraryModule } from '@iladiro/angular-slider';```

## Getting Setup

  Use ```<iladiro-angular-slider></iladiro-angular-slider>``` selector to show the slider

  Note: The example below shows the mandatory data! Slider Widget accept only Slide object type array.
    
    <iladiro-angular-slider [slideList]="list"></iladiro-angular-slider>

  Note: As default I used font awesome icons, but you can use which icons you prefer

## Interface
Convert your array in an Slide object array. As you can see, all properties are not required.<br><br>
Import IladiroAngularSlide from ```import { IladiroAngularSlide } from '@iladiro/angular-slider/lib/interfaces/slide.interface';```

    interface IladiroAngularSlide {
        link?: string;
        mediaSrc?: string;
        tag?: string;
        title?: string;
        description?: string;
        cta?: string;
    }

## Examples
  Note: <strong>Default template</strong><br>
    <pre>
        ```
        <iladiro-angular-slider
            [slideList]="list">
        </iladiro-angular-slider>
        ```
    </pre>

  Note: <strong>Custom template</strong><br>
    <pre>
        ```
        <iladiro-angular-slider
            [slideList]="list">
            [maxVisibleSlides]="2"
            [paginatorArrowNext]="'fa fa-arrow-circle-o-right fa-4x'"
            [paginatorArrowPrev]="'fa fa-arrow-circle-o-left fa-4x'"
            [paginatorTemplate]="'templateOne'">
        </iladiro-angular-slider>
        ```
    </pre>

  Note: <strong>Custom dynamic template</strong><br>
    <pre>
        ```
        <iladiro-angular-slider
            [maxVisibleSlides]="1"
            [paginatorArrowNext]="'fa fa-arrow-circle-o-right fa-4x'"
            [paginatorArrowPrev]="'fa fa-arrow-circle-o-left fa-4x'"
            [paginatorTemplate]="'templateOne'"
            [slideList]="list">
            <ng-template
                #customTemplate
                let-slide="slide"
                let-first="first"
                let-last="last"
                let-index="index"
                let-activeIndex="activeIndex"
                let-direction="direction">
                <your-template
                    [slide]="slide"
                    [index]="index"
                    [activeIndex]="activeIndex"
                    [first]="first"
                    [last]="last"
                    [direction]="direction">
                </your-template>
            </ng-template>
        </iladiro-angular-slider>
        ```
    </pre>

## Paginator
You can choose which type of <strong>paginator</strong> to use, there are three different types.
* default
* templateOne
* templateTwo

<pre>
    <div style="display: flex">
        <div>
            <img src="./projects/iladiro-angular-slider-library/screenshots/paginator-default.png">
        </div>
        <div>
            <img src="./projects/iladiro-angular-slider-library/screenshots/paginator-template-one.png">
        </div>
        <div>
            <img src="./projects/iladiro-angular-slider-library/screenshots/paginator-template-two.png">
        </div>
    </div>
</pre>

## Options

  Other options are available besides the mandatory ones

  property | type | required | default | notes
  ------------ | ------------- | ------------- | ------------- | -------------
  slideList | ``` Array<IladiroAngularSlide> ``` | yes | ``` undefined ``` | This widget expect a list of Slide to show it.                                                         
  maxVisibleSlides | ``` Number ``` | no | ``` undefined ``` | You can choose how many slides to show at a time
  paginatorTemplate | ``` String ``` | no | ``` default ``` | You can choose which type of pagination you want to use between: default, templateOne, templateTwo
  paginatorArrowStart | ``` String ``` | no | ``` fa fa-angle-double-left ``` | You can change the arrow that jumps to the first item in the list
  paginatorArrowEnd | ``` String ``` | no | ``` fa fa-angle-double-right ``` | You can change the arrow that jumps to the last item in the list
  paginatorArrowNext | ``` String ``` | no | ``` fa fa-chevron-right ``` | You can change the arrow that goes to the next item
  paginatorArrowPrev | ``` String ``` | no | ``` fa fa-chevron-left ``` | You can change the arrow that moves to the previous item
  paginatorMaxVisiblePages | ``` Number ``` | no | ``` 5 ``` | If you were to use the templateTwo template, you might need this option, i.e. it allows you to tell the paginator that you want to display maximum n numbers of pages
  customClass | ``` String ``` | no | ``` undefined ``` | You can also pass a class or a list of classes to add to the parent slide tag. It can be useful, for example, to use the default card but customize it specifically for that section
  clickableSlide | ``` boolean ``` | no | ``` false ``` | Set if slide is clickable or not. If set on true css cursor is type pointer

## Events
  Event name | Return | Description | Example
  ------------ | ------------- | ------------- | -------------
  goNextEvent | ``` Object Es. {page: 2, direction: 'next'} ``` | Allows you to capture the event when the pager is used to move to the next slide | ```<iladiro-angular-slider (goNextEvent)="console.log($event)"></iladiro-angular-slider>```
  goPrevEvent | ``` Object Es. {page: 2, direction: 'prev'} ``` | Allows you to capture the event when the pager is used to move to the previous slide | ```<iladiro-angular-slider (goPrevEvent)="console.log($event)"></iladiro-angular-slider>```
  goFirstEvent | ``` Object Es. {page: 2, direction: 'first'} ``` | Allows you to capture the event when the pager is used to return to the first slide | ```<iladiro-angular-slider (goFirstEvent)="console.log($event)"></iladiro-angular-slider>```
  goLastEvent | ``` Object Es. {page: 2, direction: 'last'} ``` | Allows you to capture the event when the pager is used to go to the last slide | ```<iladiro-angular-slider (goLastEvent)="console.log($event)"></iladiro-angular-slider>```
  clickSlideEvent | ``` Object of IladiroAngularSlide ``` | Allows you to capture the event when user click on Slide | ```<iladiro-angular-slider (clickSlideEvent)="console.log($event)"></iladiro-angular-slider>```

---
_Source: https://npm.io/package/@iladiro/angular-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._