Styling classic slider navigation

[eyedia]

I have a classic slider on my site but the previous and next buttons appear on top of the content and they are also just grey blocks with no arrows?

You can see here: http://eyedialabs.ca/sylvie-sabourin/

Is it possible to instead have the little dots below the slider that people can click through? Or otherwise to have the arrows on either side of the slider?

Thank you

[christian]

Hey @reform,

I don’t see a slider in the page. But, since you mentioned Classic Slider, I’ll help you achieving the little dots as that’s the simplest and easy to style.

First, disable the Prev/Next Navigation and enable the Control Navigation

Then, add this code in your page’s Content CSS to move the Control Navigation to the bottom and turn the squares into circles. Some colors of the Classic Slider are taken from Theme Options so edit the colors there.

.flex-control-nav:not(.flex-control-thumbs) {
    top: auto;
  	bottom: 0;
}

.flex-control-nav a {
    background-color: #ccc;
    border-radius: 100%;
}

You should get something similar to the screenshot below.

Please just remember that the code I’ve given is only a simple cosmetic override. For complex customizations, you need to either learn CSS on your own, hire a web developer or slider builder plugins like Slider Revolution.

Hope that helps.

[eyedia]

Amazing and thank you!

I added a bit to remove the background around the dots, center them and added a border to the dots as well incase it helps anyone else

.x-child-theme-active .flex-control-nav:not(.flex-control-thumbs) {
top: auto !important;
left: 0 !important;
right: 0 !important;
background-color: #fff0;
}

.x-child-theme-active .flex-control-nav a {
background-color: #828282;
border-radius: 100%;
border: solid #5e5e5e 2px;
}

[lely]

You’re always welcome @reform!

Thank you for sharing the adjustment you did.

Cheers!