[Scripts] How to build a Posts Slider using Splide

Splide is one of the scripts that gets registered and ready to be used when the Scripts module is enabled in Oxy Toolbox.

This tutorial provides the steps to set up a responsive posts slider in Oxygen using Splide.

Live Demo

With a few changes we can also set up a full-width slider like this.

Step 1

Let us register a custom image size for the slide images so they all look uniform.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Custom image sizes

Code:

add_image_size( 'slider_image', 480, 300, true );

Set the snippet to run everywhere. Save changes and activate.

If your posts already have featured images, you will need to regenerate thumbnails.

Step 2

Edit the Page/Template (with Oxygen) where you would like to have the slider.

Automatic Setup

If you want to paste the entire structure from the demo site, install and activate Hydrogen Pack (premium) or Hydrogen Paste (free), reload Oxygen editor and paste the following:

eyJzb3VyY2UiOiJodHRwczovL3NwbGlkZS53cGRlbW8uZGV2IiwiY29tcG9uZW50Ijp7ImlkIjoyLCJuYW1lIjoiY3Rfc2VjdGlvbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjIsImN0X3BhcmVudCI6MTAwMDE5LCJzZWxlY3RvciI6InNlY3Rpb24tMi03NiIsImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiY2xhc3NlcyI6W119LCJjaGlsZHJlbiI6W3siaWQiOjY3LCJuYW1lIjoiY3RfZGl2X2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6NjcsImN0X3BhcmVudCI6Miwic2VsZWN0b3IiOiJkaXZfYmxvY2stNjctNzYiLCJvcmlnaW5hbCI6eyJ3aWR0aCI6IjEwMCIsIndpZHRoLXVuaXQiOiIlIn0sImNsYXNzZXMiOlsic3BsaWRlIl0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZX0sImNoaWxkcmVuIjpbeyJpZCI6NjYsIm5hbWUiOiJjdF9kaXZfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjo2NiwiY3RfcGFyZW50Ijo2Nywic2VsZWN0b3IiOiJkaXZfYmxvY2stNjYtNzYiLCJvcmlnaW5hbCI6eyJ3aWR0aCI6IjEwMCIsIndpZHRoLXVuaXQiOiIlIn0sImNsYXNzZXMiOlsic3BsaWRlX190cmFjayJdLCJhY3RpdmVzZWxlY3RvciI6InNwbGlkZV9fdHJhY2sifSwiY2hpbGRyZW4iOlt7ImlkIjozLCJuYW1lIjoib3h5X2R5bmFtaWNfbGlzdCIsIm9wdGlvbnMiOnsiY3RfaWQiOjMsImN0X3BhcmVudCI6NjYsInNlbGVjdG9yIjoiX2R5bmFtaWNfbGlzdC0zLTc2Iiwib3JpZ2luYWwiOnsid3BfcXVlcnkiOiJtYW51YWwiLCJxdWVyeV9hcmdzIjoicG9zdF90eXBlPXBvc3QmcG9zdHNfcGVyX3BhZ2U9NSZub19mb3VuZF9yb3dzPXRydWUifSwiY2xhc3NlcyI6WyJzcGxpZGVfX2xpc3QiXSwiYWN0aXZlc2VsZWN0b3IiOiJzcGxpZGVfX2xpc3QifSwiY2hpbGRyZW4iOlt7ImlkIjo0LCJuYW1lIjoiY3RfZGl2X2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6NCwiY3RfcGFyZW50IjozLCJzZWxlY3RvciI6ImRpdl9ibG9jay00LTc2IiwiY2xhc3NlcyI6WyJzcGxpZGVfX3NsaWRlIl0sImFjdGl2ZXNlbGVjdG9yIjoic3BsaWRlX19zbGlkZSJ9LCJjaGlsZHJlbiI6W3siaWQiOjEyLCJuYW1lIjoiY3RfbGluayIsIm9wdGlvbnMiOnsiY3RfaWQiOjEyLCJjdF9wYXJlbnQiOjQsInNlbGVjdG9yIjoibGluay0xMi03NiIsImFjdGl2ZXNlbGVjdG9yIjpmYWxzZX0sImNoaWxkcmVuIjpbeyJpZCI6MTksIm5hbWUiOiJjdF9pbWFnZSIsIm9wdGlvbnMiOnsiY3RfaWQiOjE5LCJjdF9wYXJlbnQiOjEyLCJzZWxlY3RvciI6ImltYWdlLTE5LTc2Iiwib3JpZ2luYWwiOnsic3JjIjoiW294eWdlbiBjdF9zaWduX3NoYTI1Nj0nYWE0YTg0NzEwMGJlYjc2OGM1MmJjMDRlNmU1YTk5NjE4MjAzOGRkMGZlODhhMzMxMTJkZjkxZjEzNmI0M2NlYicgZGF0YT0nZmVhdHVyZWRfaW1hZ2UnIHNpemU9J3NsaWRlcl9pbWFnZScgXSIsInNyY2R5bmFtaWMiOnRydWV9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOjF9LHsiaWQiOjI3LCJuYW1lIjoiY3RfaGVhZGxpbmUiLCJvcHRpb25zIjp7ImN0X2lkIjoyNywiY3RfcGFyZW50IjoxMiwic2VsZWN0b3IiOiJoZWFkbGluZS0yNy03NiIsIm9yaWdpbmFsIjp7InRhZyI6ImgzIiwiZm9udC1zaXplIjoiMjAiLCJtYXJnaW4tdG9wIjoiMTAiLCJsaW5lLWhlaWdodCI6IjEuMyJ9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsImN0X2NvbnRlbnQiOiI8c3BhbiBpZD1cImN0LXBsYWNlaG9sZGVyLTI4XCI+PC9zcGFuPiJ9LCJjaGlsZHJlbiI6W3siaWQiOjI4LCJuYW1lIjoiY3Rfc3BhbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjI4LCJjdF9wYXJlbnQiOjI3LCJzZWxlY3RvciI6InNwYW4tMjgtNzYiLCJjdF9jb250ZW50IjoiW294eWdlbiBjdF9zaWduX3NoYTI1Nj0nOGZlZmMwNDlhNTRlNjFlNTNiOGE1ZTZlZDk1NDBhOGQ5YmJiNTE1OGI5ZTZmNDkxMTBkOWYzYWU5N2I4ZjEyZScgZGF0YT0ndGl0bGUnIF0ifSwiZGVwdGgiOjF9XSwiZGVwdGgiOjF9XSwiZGVwdGgiOjh9XSwiZGVwdGgiOjd9XSwiZGVwdGgiOjZ9XSwiZGVwdGgiOjV9XSwiZGVwdGgiOjR9LHsiaWQiOjQwLCJuYW1lIjoiY3RfY29kZV9ibG9jayIsIm9wdGlvbnMiOnsiY3RfaWQiOjQwLCJjdF9wYXJlbnQiOjIsInNlbGVjdG9yIjoiY29kZV9ibG9jay00MC03NiIsIm9yaWdpbmFsIjp7ImNvZGUtcGhwIjoiPD9waHBcblx0d3BfZW5xdWV1ZV9zdHlsZSggJ294eV90b29sYm94X3NjcmlwdHNfc3BsaWRlJyApO1xuXG5cdHdwX2VucXVldWVfc2NyaXB0KCAnb3h5X3Rvb2xib3hfc2NyaXB0c19zcGxpZGUnICk7XG4/PiIsImNvZGUtanMiOiIoZnVuY3Rpb24gKCQpIHtcblx0JChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24oKXtcblx0XHQvLyBkbyBub3QgcnVuIHRoZSBjb2RlIGluIE94eWdlbiBlZGl0b3IuXG5cdFx0aWYod2luZG93LmFuZ3VsYXIpIHJldHVybjtcblx0XHRcdFxuXHRcdG5ldyBTcGxpZGUoICcuc3BsaWRlJywge1xuXHRcdFx0cGVyUGFnZTogMyxcblx0XHRcdGdhcDogJzMwcHgnLFxuXHRcdFx0YnJlYWtwb2ludHM6IHtcblx0XHRcdFx0Jzc2Nyc6IHtcblx0XHRcdFx0XHRwZXJQYWdlOiAyLFxuXHRcdFx0XHRcdGFycm93czogZmFsc2UsXG5cdFx0XHRcdFx0Ly8gcGFnaW5hdGlvbjogZmFsc2UsXG5cdFx0XHRcdH0sXG5cdFx0XHRcdCc0NzknOiB7XG5cdFx0XHRcdFx0cGVyUGFnZTogMSxcblx0XHRcdFx0XHRhcnJvd3M6IHRydWUsXG5cdFx0XHRcdH0sXG5cdFx0XHR9XG5cdFx0fSApLm1vdW50KCk7XG5cdH0pO1xufSkoalF1ZXJ5KTsiLCJjb2RlLWNzcyI6Ii5zcGxpZGVfX2Fycm93IHtcblx0bWFyZ2luLXRvcDogLTQ1cHg7XG59XG5cbkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1pbi13aWR0aDogMTIxOHB4KSB7XG5cdC5zcGxpZGVfX2Fycm93LS1wcmV2IHtcblx0XHRsZWZ0OiAtMy41cmVtO1xuXHR9XG5cblx0LnNwbGlkZV9fYXJyb3ctLW5leHQge1xuXHRcdHJpZ2h0OiAtMy41cmVtO1xuXHR9XG59XG5cbi5zcGxpZGVfX3BhZ2luYXRpb25fX3BhZ2UuaXMtYWN0aXZlIHtcblx0YmFja2dyb3VuZDogIzMzMztcblx0dHJhbnNmb3JtOiBzY2FsZSgxKTtcbn0ifSwiYWN0aXZlc2VsZWN0b3IiOmZhbHNlLCJjdF9jb250ZW50IjoiIn0sImRlcHRoIjoxfV0sImRlcHRoIjozfSwiY2xhc3NlcyI6eyJzcGxpZGUiOnsib3JpZ2luYWwiOnt9fSwic3BsaWRlX190cmFjayI6eyJvcmlnaW5hbCI6eyJwYWRkaW5nLWJvdHRvbSI6IjQwIn19LCJzcGxpZGVfX2xpc3QiOnsib3JpZ2luYWwiOnt9fSwic3BsaWRlX19zbGlkZSI6eyJvcmlnaW5hbCI6e319fSwiY29sb3JzIjp7fX0=

Manual Setup

Add a Section.

Add a Div inside the Section. Set its width to 100%. Assign a class of splide.

Add another Div inside the above Div. Set its width to 100%. Assign a class of splide__track. Set a bottom padding of 40px for space between the images and pagination bullets.

Add a Repeater inside the above Div.

Set this manual query:

post_type=post&posts_per_page=5&no_found_rows=true

Select the Repeater’s Div and the elements you want to show for each slide. In this example, let’s add featured image and title both linking to the single post.

Add a Link Wrapper. Click data in the URL field and select permalink.

Add an Image inside the Link Wrapper, click data for Image URL and select Featured Image of Medium size.

Then change medium in the populated Image URL to slider_image.

Let’s add the post title below the image. + Add > WordPress > Dynamic Data > Title. Set your desired font size (say 20px) and heading tag (h3). Add a top margin of 10px.

Select the Section and add a Code Block.

PHP & HTML:

<?php
	wp_enqueue_style( 'oxy_toolbox_scripts_splide' );

	wp_enqueue_script( 'oxy_toolbox_scripts_splide' );
?>

CSS:

.splide__arrow {
	margin-top: -45px;
}

@media only screen and (min-width: 1218px) {
	.splide__arrow--prev {
		left: -3.5rem;
	}

	.splide__arrow--next {
		right: -3.5rem;
	}
}

.splide__pagination__page.is-active {
	background: #333;
	transform: scale(1);
}

JS:

(function ($) {
	$(document).ready(function(){
		// do not run the code in Oxygen editor.
		if(window.angular) return;
			
		new Splide( '.splide', {
			perPage: 3,
			gap: '30px',
			breakpoints: {
				'767': {
					perPage: 2,
					arrows: false,
					// pagination: false,
				},
				'479': {
					perPage: 1,
					arrows: true,
				},
			}
		} ).mount();
	});
})(jQuery);

and we are done.

Slider will not appear in the Oxygen editor but should be working on the front end.

Top