The default position of the navigation arrows or bullets will mean they’re likely to be invisible/unusable in many situations. Eg here’s an example of each - they’re visible, but only just:
I can use CSS to move the bullets down so they’re won’t be obscured, but I haven’t managed to move the arrows beyond the images/content, eg like this:
I can move the arrows further to the right or left, but then they become invisible. Is this possible?
I would be grateful for any suggestions.
I think perhaps the solution is not to use the Swiper navigation option, but to use buttons with onclick events. (But if there is a better/simpler solution, I would be interested in any advice.
Hi Tom,
The Swiper component is designed to display the controls inside its container. There are multiple themes which you can apply, to suit your design/slides background.
You can indeed just design and position custom control buttons per your needs.
Thanks Teodor. I appreciate there are several themes and of course you can your own CSS too. However, this typically won’t provide a solution for displaying images; I imagine the Swiper is frequently used for images (the screenshots in the first post above were taken from one of your excellent demos). It would be a useful option to display navigation controls outside the content area, but perhaps difficult to do retrospectively.