To use Splide on your site, you need to import JavaScript/CSS files, write HTML code and initialize Splide.

Installation

There are 4 ways to include Splide on your site.

NPM

The recommended installation method is using NPM. Install the latest stable version with:

$ npm install @splidejs/splide

Download

You can download the Splide package form the following link:

The main JavaScript file is located on the dist directory. Import the file by using <script> tag.

<script src="path-to-the-file/splide.min.js"></script>

CDN

You can also include this library from CDN instead of hosting it on your server.

Import Splide by using that reference with:

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>

Integration

Vue and React components are available:

Importing CSS

Secondly, select a CSS file and link it to your site.

Files

You will see two different CSS files and themes directory in the dist directory.

splide.min.css
splide-[theme].min.css
All styles are included.
splide-core.min.cssOnly core styles are included.

If you want to fully customize a slider appearance, pick splide-core.min.css that doesn’t include arrows, pagination nor progress bar styles, which reduces unnecessary “override” works. Otherwise, select splide.min.css or splide-[theme].min.css. Visit this page to see a screenshot of each theme.

Linking The Style Sheet

Link the selected style sheet with <style> element.

<!-- Link to the file hosted on your server, -->
<link rel="stylesheet" href="path-to-the-file/splide.min.css">

<!-- or the one installed in node_modules directory, -->
<link rel="stylesheet" href="node_modules/@splidejs/splide/dist/css/splide.min.css">

<!-- or the reference on CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">

You need to get the latest URL if you use the jsDelivr.

Writing HTML

Next, write required HTML to create a slider.

Fundamental Structure

The basic HTML structure of Splide is like this:

<div class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
	</div>
</div>

Insert any contents inside .splide__slide element such as an image. You can use <div> element instead of <ul> and <li>.

When you create an image slider, "cover" option is useful. All images will be converted to background-image of their parent elements, which means you don’t need to crop images by an image editor.

Additional HTML

You need more HTML markups in some cases. For example:

  • Using custom arrows
  • Adding a progress bar or play/pause buttons for autoplay

To know more, refer to Arrows, Autoplay or Structure page.

Applying Splide

Finally, apply Splide to the HTML element.

Using Global Class

Splide can be accessed globally:

<script>
	new Splide( '.splide' ).mount();
</script>

Make sure that the target element is loaded if you initialize it on head:

<script>
	document.addEventListener( 'DOMContentLoaded', function () {
		new Splide( '.splide' ).mount();
	} );
</script>

Of course, using an external JavaScript instead of the inline script in order to initialize Splide is better for maintenance.

Using Import

For NPM users, import Splide class from modules and instantiate it.

import Splide from '@splidejs/splide';

new Splide( '.splide' ).mount();

Selectors

The Splide constructor accepts an ID, a class name or an Element object. Note that only the first element will be initialized even if using a class name. To apply it to all elements:

var elms = document.getElementsByClassName( 'splide' );
for ( var i = 0, len = elms.length; i < len; i++ ) {
	new Splide( elms[ i ] ).mount();
}

If you don’t need to support IE, the for loop iterating a HTMLCollection can be replaced a forEach method.

User's Guide
Tutorials
Extensions
Integration