ngx-splide

!npm
!npm bundle size

Splide.js 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.

$3

`angular2html








`

$3

`angular2html





`

Please refer to official documentation for the list of supported options https://splidejs.com/guides/options/

$3

`angular2html








`

`typescript
onSplideInit(splide)
{
console.log(splide);
}
`

$3

You can programatically change selected splide slide with selectedSlideIndex option

`angular2html
*ngFor="let image of images; let index = index"
(click)="selectedImageIndex = index">Select image {{ index + 1 }}






`

$3

Events can be handled in two ways:

#### a) Separated events

`angular2html
(onInit)="onSplideInit($event)"
(onMounted)="onSplideMounted($event)"
(onUpdated)="onSplideUpdated($event)"
(onMove)="onSplideMove($event)"
(onMoved)="onSplideMoved($event)"
(onDrag)="onSplideDrag($event)"
(onDragged)="onSplideDragged($event)"
(onVisible)="onSplideVisible($event)"
(onHidden)="onSplideHidden($event)"
(onActive)="onSplideActive($event)"
(onInactive)="onSplideInactive($event)"
(onClick)="onSplideClick($event)"
(onArrowsMounted)="onSplideArrowsMounted($event)"
(onArrowsUpdated)="onSplideArrowsUpdated($event)"
(onPaginationMounted)="onSplidePaginationMounted($event)"
(onPaginationUpdated)="onSplidePaginationUpdated($event)"
(onNavigationMounted)="onSplideNavigationMounted($event)"
(onAutoplayPlay)="onSplideAutoplayPlay($event)"
(onAutoplayPause)="onSplideAutoplayPause($event)"
(onAutoplayPlaying)="onSplideAutoplayPlaying($event)"
(onLazyloadLoaded)="onSplideLazyloadLoaded($event)"
>
`

`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;
}
}
`

$3

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

$3

You can also pass containerClass to append custom class for root div.splide node

`angular2html

`

Will produce:

`html



``