# ng2-ynslider

> Simple carousel slider.

Latest version **1.0.1** (published 2019-04-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng2-ynslider
pnpm add ng2-ynslider
yarn add ng2-ynslider
bun add ng2-ynslider
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-04-11 |
| First published | 2017-07-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 279.5 KB |
| Known vulnerabilities | 0 (+21 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Yordan Nikolov |
| Maintainers | legolas |

## Links

- npm: https://www.npmjs.com/package/ng2-ynslider
- Repository: https://github.com/copaste/ng2-ynslider
- Homepage: https://github.com/copaste/ng2-ynslider#readme
- Issues: https://github.com/copaste/ng2-ynslider/issues
- npm.io page: https://npm.io/package/ng2-ynslider

## Dependencies (8)

- [rxjs](https://npm.io/package/rxjs.md) ~6.3.3
- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [zone.js](https://npm.io/package/zone.js.md) ~0.8.26
- [@angular/core](https://npm.io/package/@angular/core.md) ~7.2.0
- [@angular/common](https://npm.io/package/@angular/common.md) ~7.2.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ~7.2.0
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ~7.2.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ~7.2.0

## Recent versions

- 1.0.1 (latest) — 2019-04-11
- 1.0.0 — 2019-04-11
- 0.0.3 — 2017-07-21
- 0.0.2 — 2017-07-17
- 0.0.1 — 2017-07-17

## README

# ng2-ynslider
Simple slider/carousel for your angular2 applications.
Does not depend of jquery.
Please star a project if you liked it, or create an issue if you have problems with it.

## Installation

1. Install npm module:
    
    `npm install ng2-ynslider --save`

## Usage

Import `YnSliderModule` in your app.
There are two components you can use in your components.

First is a `yn-slider`:

```html
<yn-slider
    [autoplay]="true"
    [initialSlide]="0"
    [pager]="false"
    [speed]="3000"
    (slideDidChange)="onSlideChange($event)"
>
    <yn-slider-slide *ngFor="let img of images; let i = index;">
        <div class="wrap">
            <img [attr.src]="img.src"/>
            <p>{{ img.description }}
        </div>
    </yn-slider-slide>
</yn-slider>
```

* `autoplay` - Autoplay the slides
* `speed` - The speed of the autoplay in ms
* `initialSlide` - Start from specific slide
* `pager` - Show/Hide the dotted pager
* `(slideDidChange)` - event emitted when slide changed
* `options` - Additional options
## Sample

Using simple yn-slider:

```typescript
import { Component } from '@angular/core';
import { YnSliderModule } from 'ng2-ynslider';

@Component({
    selector: "app",
    template: `
    <div class="container">
        <yn-slider
            [autoplay]="false"
            [initialSlide]="0"
            [pager]="false"
            [speed]="3000"
            [options]="ynOpt"
            (slideDidChange)="someActionOnChange()"
        >
            <yn-slider-slide *ngFor="let img of images; let i = index;">
                <div class="wrap">
                    <img [attr.src]="img.src"/>
                    <p>{{img.description}}
                </div>
            </yn-slider-slide>
        </yn-slider>
    </div>
    `
})
export class App {
    ynOpt = {
        height: 360,
        slidesToShow: 2,
        slidesToScroll: 1,
        autoPlay: true,
        interval: 5000,
        activeSlideIndex: 0,
        partialMode: true,
    };
}

@NgModule({
    imports: [
        // ... modules
        YnSliderModule
    ],
    declarations: [
        App
    ],
    bootstrap: [
        App
    ]
})
export class AppModule {

}
```

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