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 One comment

Splide is a wonderfully lightweight, pure Javascript carousel/slider which is gaining popularity among developers who need to include 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 I WP-Rocket which 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,
  } ).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.

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.

Keywords: , ,

One comment on “Add a Splide slider using the Oxygen Builder”

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About Nico

I am a photographer, website designer and hosting provider living in Oakham, Rutland.

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

If you need commercial photography, editorial 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, both one-to-one and in small groups. I mentor photographers with a range of experience, from beginners to working professionals.

I have a varied set of skills, having worked for well known web design and...
...web 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.

I am the Public Relations Officer for the Midlands 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.
Rutland Photographer | Photographer in Oakham | Leicestershire Photographer | Web Design Rutland | Web Design Oakham | SEO Rutland | Commercial Photographer Rutland

Green Hosting by Kualo
© Nico Morgan 2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram