[Resolved] Custom Slider navigation

[Matthias]

i created a slider with wp swiper.
This plugin works very nice with gp/gb – as you can simply create your slides with generateblocks. Only problem i encountered is the background image of gb – but if you use the plugin for that its fine.

I am trying to customize that slider now:
1. The navigation is blue and positioned over a textbox. I’d like to have that a custom color and positioned a little more to the inside
2. The bullet points below – same here: i’d like a custom color and maybe even a little larger.

As i tested several block plugins: I can recommend this plugin for anyone wanting the same – more lightweight then the common ones, (so far) regulary updated and working well with gp+gb.

[David]

Hi there,

you may want to check with the plugin author if theres any built in method to make those changes.
If there isn’t then:

1. Positioning the nav arrows inside:

.wp-swiper .swiper-button-prev {
    left: 80px;
}
.wp-swiper .swiper-button-next {
    right: 80px;
}

2. The plugin uses a CSS variable for its colours and the sizes of the navigation bullets, which you can set yourself with this CSS:

:root {
    --swiper-theme-color: #ff0000;
    --swiper-pagination-bullet-width: 12px;
    --swiper-pagination-bullet-height: 12px;        
    --swiper-pagination-bullet-size: 12px;
}

Note there are 3 variables for the bullet size, they should all be identical values.

[Matthias]

thx a lot.

the developer hasnt added this – but may at some point. At least for me those basic settings would make sense to have.

[David]

There HTML and CSS is pretty tidy. So its simple enough with CSS.

Glad to be of help.

[Author]

Posts