https://github.com/copaste/ng2-ynslider
Angular 4 Slider
https://github.com/copaste/ng2-ynslider
angular angular2 angular4 carousel slider
Last synced: about 2 months ago
JSON representation
Angular 4 Slider
- Host: GitHub
- URL: https://github.com/copaste/ng2-ynslider
- Owner: copaste
- Created: 2017-06-22T10:24:18.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-04-11T12:32:29.000Z (about 7 years ago)
- Last Synced: 2025-08-09T12:04:38.629Z (11 months ago)
- Topics: angular, angular2, angular4, carousel, slider
- Language: TypeScript
- Size: 27.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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
![]()
{{ img.description }}
```
* `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: `
![]()
{{img.description}}
`
})
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 {
}
```