Nico Morgan Media logo
Adding a splide slider using the oxygen builder

Add a Splide slider using the Oxygen Builder

Posted on 1st March 2021 in .  So far there are 2 comments

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>

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.

Blog Index

2 comments on “Add a Splide slider using the Oxygen Builder”

Leave a Reply

Your email address will not be published. Required fields are marked *

Useful Gadgets for Photographers

Affiliate Links

Advert for MPB, quality secondhand camera products

About Nico

I am an equine photographer, website designer and hosting provider living in Lincolnshire.

I work with clients who are sole traders and others which are FTSE companies. They are equally important to me.

If you need commercial photographyeditorial photography, event photography, lifestyle, equestrian or wedding photography, then I can help you, with over 30 years experience in these areas.

I also teach photography. I mentor photographers with a range of experience, from beginners to working professionals and run an equine photography course which gives members access to articles about the business of equestrian photography.

I have a varied set of skills, having worked for well known web design, SEO and analytics companies in parallel to my photography.

I design, host and maintain websites for clients as varied as farms, interior designers and equestrian centres, as well as for bloggers and sportspeople, including many riders.

I am the Public Relations Officer for the Midlands Area Point-to-Point Association, a role which utilises my PR and social media skills to promote horse racing both online and in the National press.

If you think that I could be the right person to help you, whatever your project, then please get in touch and we can discuss what you need and the ways in which I can help.

You can find out more about me here.

cross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram