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;
}
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;
}