Custom CSS for WordPress Slider

Almost anything can be adjusted with css and javascript! That said, we know some settings are better placed in the user interface as it makes it easier for lots of you to adjust slider settings. Writing code is not everyones favorite activity.

However css can easily be added by many in WordPress. Here we provide some styles that our users asked for and make them publicly available for all others who want to try things. Some values are just examples and can be adapted to your needs. Just play around. If you need more help or have special needs, consider purchasing a Gutenslider Pro / Expert license with advanced support and priority feature requests.

You should always prepend the .wp-block-eedee-block-gutenslider part to all of your css styles triggering the slider / swiper as that makes sure you do not accidentially override other plugins’ or themes’ styles.

If you only want to target one single Gutenslider block, you can also use the unique block id for your styles, found in the Gutenslider block settings under Advanced at the very bottom. E.g. prepend #gutenslider-dr8rqxqt1 instead of .wp-block-eedee-block-gutenslider

Fade out previous and next slides

.wp-block-eedee-block-gutenslider .swiper-slide {
  transition: opacity 0.8s;
}

.wp-block-eedee-block-gutenslider .swiper-slide-prev,
.wp-block-eedee-block-gutenslider .swiper-slide-next {
  opacity: 0.3;
}

woman in orange long-sleeved dress between buildings during daytime

person holding plastic while standing on wall

woman in yellow tracksuit standing on basketball court side

woman in pink floral dress holding black sunglasses

Add border radius to slides

Below an example of rounded corners, which work best with the space between slides setting available in Gutenslider Pro.

.wp-block-eedee-block-gutenslider .eedee-background-div img,
.wp-block-eedee-block-gutenslider .eedee-background-div video, {
  border-radius: 30px;
}