# Custom CSS & developers

URL: https://gutenslider.org/docs/developers/
Updated: 2026-10-07

> Styling Gutenslider with CSS, changing defaults with the gutenslider_attributes filter, adding SVG arrows, and controlling a slider from JavaScript.

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](https://gutenslider.org/custom-css-wordpress-slider/).

### 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](https://gutenslider.org/adding-custom-arrows-to-your-wordpress-sliders/) 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 } );
}
```