Archived topic
Custom Slider navigation
3 replies · Started by Matthias on June 8, 2022
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.
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.
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.
There HTML and CSS is pretty tidy. So its simple enough with CSS.
Glad to be of help.
