https://github.com/accudio/alpine-splide

The Alpine component for Splide
https://github.com/accudio/alpine-splide

Last synced: 2 days ago
JSON representation

The Alpine component for Splide

• Host: GitHub
• URL: https://github.com/accudio/alpine-splide
• Owner: Accudio
• License: mit
• Created: 2021-12-27T21:27:28.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-04-14T12:45:40.000Z (over 1 year ago)
• Last Synced: 2024-11-12T14:49:43.716Z (5 days ago)
• Language: JavaScript
• Size: 179 KB
• Stars: 16
• Watchers: 2
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Alpine Splide

The [Alpine](https://github.com/alpinejs/alpine) component for the [Splide](https://github.com/Splidejs/splide) slider/carousel.

[Splide JS](https://splidejs.com) | [Demo](https://codepen.io/accudio/pen/RwLxZgr) | [Alpine JS](https://alpinejs.dev/)

***

## Installation

There are three recommended methods of loading Alpine Splide. Adding a `script` tag with a [CDN](#cdn), importing it into your bundle with [npm](#npm), or [importing with `script type="module"`](#module-script)).

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](https://splidejs.com/guides/getting-started/#importing-css) via your preferred method.

### CDN (easy)

If you load Alpine from a CDN like [jsdelivr](https://www.jsdelivr.com/package/npm/alpine-splide) or [unpkg](https://unpkg.com/alpine-splide) 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](#usage) for markup and usage information.

### npm

Install from [npm](https://www.npmjs.com/package/alpine-splide) 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()

```

### Module Script

You can use [skypack](https://www.skypack.dev/) 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



  
...

  
...

  
...



```


### Advanced

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



```


## Options

### `options`

[Splide options](https://splidejs.com/guides/options/) provided as an object:

```html



```


### `buildMarkup`

Allows you to skip building Splide DOM structure (`splide__track`, `splide__list`) and it will instead be built for you. Default `false`.

Simply provide slides as elements directly within the `x-data="Splide"` element.

## License and Credits

Alpine Splide and Splide are released under the MIT license. Splide code and trademarks remain with the original author Naotoshi Fujita.

Alpine Splide - © 2021 Alistair Shepherd

Splide - © 2021 Naotoshi Fujita