Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JustCommunication-ru/ngx-splide
Splide.js integration to angular
https://github.com/JustCommunication-ru/ngx-splide
angular splide
Last synced: about 2 months ago
JSON representation
Splide.js integration to angular
- Host: GitHub
- URL: https://github.com/JustCommunication-ru/ngx-splide
- Owner: JustCommunication-ru
- Created: 2020-11-16T10:35:34.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-18T13:51:26.000Z (3 months ago)
- Last Synced: 2024-11-02T04:41:51.173Z (2 months ago)
- Topics: angular, splide
- Language: TypeScript
- Homepage:
- Size: 2.57 MB
- Stars: 16
- Watchers: 2
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ngx-splide - Splide.js integration to Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-splide - Splide.js integration to Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-splide - Splide.js integration to Angular. (Table of contents / Third Party Components)
README
# ngx-splide
[Splide.js](https://splidejs.com/) integration to angular
## Demo
https://justcommunication-ru.github.io/ngx-splide/
## Installation
| Angular version | Library version | Splide version |
|-----------------|-----------------|--------------|
| <=11 | ~1.0.0 | ^2.4.14 |
| >=12 | ~2.0.0 | ^4 |
| >=13 | ~3.0.0 | ^4 |
| >=14 | ~4.0.0 | ^4 |
| >=15 | ~5.0.0 | ^4 |
| >=16 | ~6.0.0 | ^4 |
| >=17 | ~7.0.0 | ^4 |
Using `npm`
`npm i --save ngx-splide`
Or if you prefer `yarn`
`yarn add ngx-splide`
## Setup
Add splide.js into your build scripts in `angular.json`:
```json
"scripts": [
"node_modules/@splidejs/splide/dist/js/splide.js",
]
```
And styles if you need it:
```json
"styles": [
"node_modules/@splidejs/splide/dist/css/splide.min.css",
"node_modules/@splidejs/splide/dist/css/themes/splide-default.min.css"
]
```
Add `NgxSplideModule` into `app.module.ts`
```typescript
import { NgxSplideModule } from 'ngx-splide';
@NgModule({
//...
imports: [
//...
NgxSplideModule
],
//...
})
export class AppModule {}
```
## Usage
You can use `` root component with `` components inside.
### Basic example
```angular2html
```
### With options
```angular2html
![]()
```
Please refer to official documentation for the list of supported options https://splidejs.com/guides/options/
### Get splide instance
```angular2html
```
```typescript
onSplideInit(splide)
{
console.log(splide);
}
```
### Select slide
You can programatically change selected splide slide with `selectedSlideIndex` option
```angular2html
Select image {{ index + 1 }}
![]()
```
### Events
Events can be handled in two ways:
#### a) Separated events
```angular2html
```
```typescript
onSplideMoved(args)
{
const newIndex = args[0];
const oldIndex = args[1];
const destIndex = args[2];
}
```
#### b) Global event
```angular2html
```
Event object:
```json
{
"name": ,
"args":
}
```
```event-name``` – name of the splide event listed in https://splidejs.com/guides/events/
```event-arguments``` – array of arguments.
For example `moved` event will be:
```json
{
"name": "moved",
"args": [ 1, 0, 1 ] // newIndex, oldIndex, destIndex
}
```
```typescript
onSplideEvent(event)
{
console.log('Splide event', event.name, 'with arguments', event.args);
switch (event.name) {
case 'moved':
const newIndex = event.args[0];
const oldIndex = event.args[1];
const destIndex = event.args[2];
break;
}
}
```
### Sync
You can sync splide instances like it described in https://splidejs.com/guides/apis/#sync
Just create `@ViewChild` in your controller:
```typescript
@ViewChild('mainSplide') mainSplide: NgxSplideComponent;
```
And pass instances with `[syncWith]`:
```angular2html
...
...
```
Please note that `mainSplide` should be rendered before second splide.
If you need more fine-grained control over sync you should use `onInit` methods and work with splide instances
### Other
You can also pass `containerClass` to append custom class for root `div.splide` node
```angular2html
```
Will produce:
```html
...
```