Add a Splide slider using the Oxygen Builder

Splide is a wonderfully lightweight, pure Javascript carousel/slider which is gaining popularity among developers who need to include a slider in web sites but don't want the bloat attached to some common slider libraries like swiper.js.

I was searching for a quick tutorial on how to add a Splide slider using the Oxygen builder, my go-to design tool, and couldn't find one. So I followed the excellent instructions on the Splide website and adapted them for Oxygen and the way it works.

Insert the links into a code block

I inserted a Code Block where I wanted the slider to eventually display.

I know Splide is small, but with Web Core Vitals in mind I was also sure to move it to below the fold in mobile, about half way down my page. It will be above the fold on some displays but Litespeed and WP-Rocket will defer the Javascript and, as you will see, Splide itself will lazyLoad the images in my slider.

In the PHP & HTML section of the Code Block I add links to the Splide Javascript on the JS Delivr CDN:

Javascript link: Copy this link and post into your code block as below

Stylesheet link: Copy this link and post into your code block as below

<script src="Paste Javascript link here"></script>

<link rel="stylesheet" href="Paste Stylesheet link here">

Some will prefer to add the Javascript to their Footer using something like Advanced Scripts or My Custom Functionality but as mine will be deferred by WP-Rocket anyway I'm not going to bother.

OK, below these links I'm going to add my HTML. My slider is going to be a classic slideshow slider for my images so in each of the list item elements I am going to place an img.

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><img src="path-to-image.jpg" width="1160" height"479" alt="image description"></li>
      <li class="splide__slide"><img data-splide-lazy="path-to-image2.jpg" width="1160" height"479" alt=""></li>
      <li class="splide__slide"><img data-splide-lazy="path-to-image3.jpg" width="1160" height"479" alt=""></li>
    </ul>
  </div>
</div>

Note that the first image has a source (src) attribute while the others have data-splide-lazy instead.

This is because we want the first image to be loaded immediately, while the others we want to lazy load before they are displayed and not on the initial page load.

OK, so now we switch to the Javascript tab of our Code Block and add the JS we need to activate the Splide:

document.addEventListener( 'DOMContentLoaded', function () {			
  new Splide( '.splide', {
    autoplay: true,
    type: 'fade',
    heightratio: 0.412,
    lazyLoad: 'nearby',
    preloadPages: 1,
    interval: 2000,
    rewind: true,
  } ).mount();
} );

Let me talk you through this.

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

This is all you need to apply Splide in a global class.

By adding,

document.addEventListener( 'DOMContentLoaded', function () {

before it I ensure that the DOM content is loaded first.

autoplay: true,

is an option to start the slideshow automatically.

type: 'fade',

makes Splide us its built-in fade transition instead of the default slide one.

heightratio: 0.412,

This option ensure that the ratio of height to width stays the same for my slides which are already size to be the same. When the slider loads in different viewport sizes the aspect ratio will always be correct for my chosen images.

lazyLoad: 'nearby',
preloadPages: 1,

Remember those data-splide-lazy attributes in the HTML above? This is where they come in. 'nearby' tells Splide to only lazy load slides which are close to the one currently displayed and preloadPages: 1 tells Splide to lazy load the next slide only.

interval: 2000,
rewind: true,

Here I have added the interval variable to change the duration of each of my slides to 2 secs (measured in milliseconds). The rewind: true option tells the slider to begin again when it has shown all the slides for the appropriate duration.

And that is it! There are lots of other options which can be added in addition to the ones I have used. There is a reference of the options here.

See also: building a lightweight lightbox using Featherlight in Oxygen.