Owl Carousel - Slider Navigation Vertical Alignment

HTML & CSS
1

Hi there,

Currently having problems with vertically aligning the slider buttons on Owl Carousel, so that as the slider responds the arrows stay in the vertical centre. I’ve set some CSS on the “.owl-controls.clickable” element so that it positions the buttons’ container 32% from the top but surely this should be 50% so that it stays consistent through each breakpoint?

Please could someone advise?

Please find my current code attached along with references.
en_mobile-delivery-banner.zip (50.2 KB)

Cheers,

Andrew

2

The arrows are 38px tall so a vertical center would be top:50% minus 19px.

e.g.


owl-controls.clickable {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    margin-top: -19px;
}
3

Hi Paul,

Ah excellent, thanks for the response - didn’t think to use margin to re-position it after setting a top, doh!
Is this generally acceptable or seen as bad-practice?

I haven’t tended to use this method before since it means maintenance if the arrows were to change size, but can’t think of a suitable alternative?

Cheers,

Andrew

4

You’d still need to change the size of the code for the arrow wouldn’t you so I don’t see ts much effort. If you want automatic alignment then you’d need to use flexbox or display:table-cell inside the absolute element.

You could also center easily if you have a fixed height.

e.g.

.owl-controls.clickable {
 position: absolute;
top:0;
bottom:0;
margin:auto;
height:30px;
left: 0;
display: block;
width: 100%;
}

It’s fine when its not a ‘magic number’ which it is not because you are working with a an element of fixed height. Negative margins are bad when you use them just to make things line up depending on a guessed size. For something like an arrow its fine bit not for a box full of fluid content.

Of course automatic is always better and if you nested a full height display:table element and a table-cell element inside your absolute element you could simply use vertical-align:middle.

Or indeed use flexbox although again the structure would probably need to be changed.

The easiest solution in this case is the negative margin or the fixed height auto margin example (the snippet above).

5

Great, thanks for your feedback Paul, much appreciated!

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.