Improving dot navigation
-
Hi,
I have a request / suggestion:
The dot navigation (as opposed to the left/right arrows) is very elegant, but it has a settings problem. Specifically, you can define only 1 color (background), which makes them hard to see on different images. Since the arrows already have 2 colors (back/foreground) in the settings, the dots should also use them.
They could look like the Tabloid theme slider for instance: a circle in the foreground color, inside a bigger circle in the background color.And 1 nice-to-have: be able to set their vertical position in the image (like pixels from bottom)
Thanks for your attention,
RP
-
Heya!
We’d like to keep it simple and plug and play generally, but you can certainly do that with a sprinkle of custom CSS.
For example
.maxslider .slick-dots button { width: 20px; height: 20px; } .maxslider .slick-dots button:before { content: ""; width: 10px; height: 10px; display: inline-block; background-color: #000; border-radius: 50%; margin-left: 3px; }
This will add foreground dots to the dot navigation.
The image position can be changed by applying
background-position
on the image element you wish 🙂-
This reply was modified 2 years, 1 month ago by
Vassilis Mastorostergios.
Thank you so much for your quick reply Vasili!
But I must have missed something, if I put your code in the custom CSS I’m not getting 2 concentric circles, I just get bigger dots (20x20px), in a single color which is the one defined in the settings as “navihgation background color” (not #000).
Am I doing something wrong ?
Thanks,
RPHmm, is the website somewhere live so I can inspect it?
I need to give you credentials in a private email, it’s under construction right now.
You can shoot me an email at vmasto [at] cssigniter [dot] com
-
This reply was modified 2 years, 1 month ago by
- The topic ‘Improving dot navigation’ is closed to new replies.