This is what I wish to create (view image). I would like to match the size and positions on the navigation dots on two parallel sliders. And I also need the navigation dots perfectly square shaped, with no rounded corners.
This is the line of CSS I’m using right now:
.x-flexslider-shortcode-container .flex-control-nav:not(.flex-control-thumbs) {
top: auto;
right: auto;
left: 50%;
bottom: -4px;
margin-left: -36px;
background-color: transparent;
}
.x-flexslider-shortcode-container .flex-control-nav a {
background-color: transparent;
border: solid 1px #000;
}
.x-flexslider-shortcode-container .flex-control-nav a.flex-active {
background-color: #000;
}