Simple-Slider - customise colours?

Hi, I'd like to be able to customise the colors of the buttons and indicators when using the Simple Slider component from the Media section.

I'm new to bootstrap and only have a basic understanding HTML and CSS.

The default buttons and indicators are currently blue - I can't workout if there is an overall bootstrap colour theme which applies to the whole site, or can I add some detail to the Simple-Slider.css? Or are they infact just images that I'd need to replace?

Thanks very much for any help.

update: I have worked out how to colour the indicators using:

.swiper-pagination-bullet-active { opacity:1; background:#ffffff; }

so I'm just stuck on how to change the colour of the buttons on either side.

If you are new to HTML and CSS I suggest learning more about those subjects and learn to walk before trying to run.

If you can find out what css property is that's being used to style the controls you can copy that to your bespoke style sheet and change the hex value for the buttons to Color them differently.

Thanks Chris.

As it was a built-in component I hoped it would be easy to style, but finding information appears to be tricky.

This appears to relate to the: swiper

But this also appears to be relevant: so I'm trying to workout which is which

I discovered the CSS to style the indicators by using Inspect in Chrome on my site Preview.

I will keep investigating in the meantime.

After a bit more investigating I found some useful information here: there are built-in classes for white or black buttons.

So on the class name I added: swiper-button-white The full Class Name being: swiper-button-next swiper-button-white and swiper-button-prev swiper-button-white (or change white to black)

If you want to change to a different colour, or arrow style, you can swap out the .svg file that is used for one of your own by clicking on the slider arrow and changing Bg Image under Style Attribute in the Options window.

I have since realised that the Slider works with Javascript and double clicking the script in the Design window listed the address where the full details for the script can be found.

Hopefully that's saved someone some time.

just replace the SVG with your own edited version or image of your own.

Is the simple slider a user submitted component that is largely custom code?


thanks mistados, I eventually worked it out ;-)

Chris, I'm not really sure, quite possibly. As you can tell, I don't entirely understand how everything works, but I do think some components are customised versions from an original source.

Hi, There is also class to change color of pagination bullets, but only white and black. swiper-pagination-white swiper-pagination-black