Custom CSS & developers

For theme authors and developers: the class names you can rely on, CSS recipes, the PHP filters and how to reach a slider from JavaScript.

Class names

The front-end class names stay stable across versions, so CSS written for 6.x keeps matching in 7.0:

Selector	Element
.wp-block-eedee-block-gutenslider	The slider block. Each one also has an ID: #gutenslider-<id> (Advanced panel → Slider ID).
.swiper-slide, .wp-block-eedee-block-gutenslide	One slide
.eedee-background-div	A slide’s background (image or video)
.slide-content	The blocks on a slide
.eedee-gutenslider-prev, .eedee-gutenslider-next	The arrow buttons
.eedee-gutenslider-pagination	The dots
.gutenslider-divider-top, .gutenslider-divider-bottom	Shape dividers

CSS recipes

Scope your CSS to .wp-block-eedee-block-gutenslider, or to one slider’s ID, so it never touches other elements. Add it under Appearance → Editor → Styles → Additional CSS or in your theme.

Dim the neighbouring slides

.wp-block-eedee-block-gutenslider .swiper-slide {
	transition: opacity 0.6s;
}
.wp-block-eedee-block-gutenslider .swiper-slide:not(.swiper-slide-active) {
	opacity: 0.35;
}

Rounded slides

.wp-block-eedee-block-gutenslider .swiper-slide {
	border-radius: 16px;
	overflow: hidden;
}

A default divider color

.gutenslider-divider-top,
.gutenslider-divider-bottom {
	color: #faf8f5; /* your page background */
}

More in Custom CSS recipes.

PHP filters

Change the defaults: gutenslider_attributes

New sliders start with the defaults of the block’s attributes. Change them for your site, for example to autoplay off and a 60vh height:

add_filter( 'gutenslider_attributes', function ( $attributes ) {
	$attributes['autoplay']['default']     = false;
	$attributes['sliderHeight']['default'] = '60vh';
	return $attributes;
} );

The slide block has the same filter, gutenslide_attributes. Both work as in 6.x. Defaults only apply to settings a slider has not saved; existing sliders keep their values.

Your own arrows: gutenslider_arrows

Adds arrow shapes to the arrow style picker, next to the eleven built-in styles (free and Pro). See Custom SVG arrows for how to prepare the SVG.

add_filter( 'gutenslider_arrows', function ( $arrows ) {
	$arrows[] = array(
		'value' => 'my-arrow',
		'label' => 'My arrow',
		'prev'  => '<svg …>…</svg>',
		'next'  => '<svg …>…</svg>',
	);
	return $arrows;
} );

More divider shapes: gutenslider_dividers

The same for shape dividers: an array keyed by value, each with value, label, svg and optionally svg-inverted.

JavaScript

In 7.0 the front end is an Interactivity API module, and Swiper loads when a slider comes near the screen. As in 6.x, each slider element gets element.gutenslider with the Swiper instance (swiperInstance) and destroy(), once its Swiper has started. The element fires a gutenslider:init event at that moment, with the same object as event.detail. Wait for it instead of reading swiperInstance on page load:

const slider = document.querySelector( '#gutenslider-my-id' );
const start = ( swiper ) => {
	document.querySelector( '.my-next' ).addEventListener( 'click', () => swiper.slideNext() );
};
if ( slider.gutenslider?.swiperInstance ) {
	start( slider.gutenslider.swiperInstance );
} else {
	slider.addEventListener( 'gutenslider:init', ( e ) => start( e.detail.swiperInstance ), { once: true } );
}