Alpine Splide

The Alpine component for the Splide slider/carousel.

Splide JS | Demo | Alpine JS

*

Installation

There are three recommended methods of loading Alpine Splide. Adding a script tag with a CDN, importing it into your bundle with npm, importing with script type="module", or adding a script tag with a CDN.
You could also download src/js/components/Splide.js and include it directly into your project.

Which method you use will depend on how you prefer to use and import Alpine.js.

Make sure to also include Splide CSS via your preferred method.

$3

If you load Alpine from a CDN like jsdelivr or unpkg with a script tag you can load Alpine Splide via the same method:
``html


`

When loading via this method you need to make sure that Alpine Splide loads first. This is generally done by including the script tag for Alpine Splide before Alpine. Watch out for using type="module" or async.

See usage for markup and usage information.

$3

Install from npm with:
`
npm install alpine-splide
`

Import it into your bundle alongside Alpine and register it with Alpine.data():
`js
import Alpine from 'alpinejs'
import Splide from 'alpine-splide'

Alpine.data('Splide', Splide)

Alpine.start()
`

$3

You can use skypack to import using ES Modules similar to above like so:

`js
import Alpine from 'https://cdn.skypack.dev/alpinejs';
import Splide from 'https://cdn.skypack.dev/alpine-splide'

Alpine.data('Splide', Splide)

Alpine.start()
`

*

Usage

Basic usage:
`html


Providing options to splide and using the buildMarkup option to simplify source markup:
`html


For advanced usage you can declare x-data="Splide" further up the DOM tree from the actual slider element by adding x-ref="slider" on the slider element.

The suggested method of extending Alpine Splide is by copying the source and modifying it to your requirements. You can however also destructure the Splide component into a different x-data object, call splideInit() manually and work with this.splide:

`html