Howto / By / 3 minutes of reading

On custom websites with complex designs, there might be the need for more options than Gutenslider has to offer out of the box. In this post we show you, how you can use javascript to customize your Gutenslider even further by executing functions on the underlying swiper instance.

For this example we are building a simple Gutenslider that is controlled by two Gutenberg button blocks, that will initiate the previous and next slide functions.

low angle photo of coconut trees beside body of water

green and brown tree during daytime

silhouette photography of palm trees

bird's eye view photograph of green mountains

cattle, herd, grazing

green trees on forest during daytime

forest trees

You can use arbitraty elements as controls for your slider.

You need the following prerequisites:

  • unique identifier of slider (e.g. id from block advanced controls)
  • unique identifier of the elements you want to use as controls (e.g. unique class name)
  • have some little javascript knowledge and know how to include javascript in your page
    (prefer to add it to a script file that is already loaded – e.g. theme js)

Use the buttons below to control your slider

previous Slide
Next Slide
Go To slide 3

Selecting the elements

To get the custom logic working, we need to select the correct DOM elements for the Gutenslider you want to control (1), the “Previous Slide” Button (2), the “Next Slide” Button (3), the “Go to Slide 3” Button (4). The Gutenslider plugin gives each slider a custom unique id that you can use as a queryselector in javascript. You can find that id in Block Settings > Advanced > Slider ID. In this example it is e.g.
gutenslider-7dyparcj6.

For the elements you want as controllers, it is easiest to give them a custom unique class. Almost all Gutenberg Blocks have a setting in the Block settings Advanced tab to add Additional CSS class(es) at the very bottom. We here chose gs-custom-next and gs-custom-prev.

The Code

We here show you the annotated javascript code you can insert into your page. If you have no idea how to do it, you can use the WPCode plugin, that allows you to insert arbitrary javascript into your page. Note that in that case you need to wrap the code with
<script type="text/javascript"> ... </script>

//test if your script was loaded - check browser console log
console.log( 'test custom scripting' );

//define variables for all your relevant elements
const customNextButton = document.querySelector('.gs-custom-next');
const customPrevButton = document.querySelector('.gs-custom-prev');
const controlledGutenslider = document.querySelector('#gutenslider-83tfsie32');

//test if all your elements were selected correctly
console.log( customNextButton, customPrevButton, controlledGutenslider );

//add event listeners to buttons
customNextButton.addEventListener( 'click', ( e ) => {
	if (
		controlledGutenslider &&
		controlledGutenslider.gutenslider &&
		controlledGutenslider.gutenslider.swiperInstance
	) {
		// go to next slide
		controlledGutenslider.gutenslider.swiperInstance.slideNext()
	}
})

customPrevButton.addEventListener( 'click', ( e ) => {
	if (
		controlledGutenslider &&
		controlledGutenslider.gutenslider &&
		controlledGutenslider.gutenslider.swiperInstance
	) {
		// go to previous slide
		controlledGutenslider.gutenslider.swiperInstance.slidePrev()
	}
})

Before publishing in production you should check:
– are the ids / classnames correct for your sliders and elements that control the block?
– have you removed all console.log calls from the code

If you are having issues implementing this, Gutenslider Pro includes support for custom scripting.

Related Posts