How do I center the navigation arrows for owl carousel?

HTML & CSS
1

The left and right navigation arrows are below the carousel slider.

Do I change that in the jquery or css?

2

I just looked at the pen on the Codepen editor page, and the JS seems to be reporting a ‘missing token’ error. Also, I’m not seeing any arrows.

3

My left and right arrows are showing.

1440×900 311 KB

I used Css to add in the left and right arrows.
How do I fix the missing token error? What is that?

4

I can’t look at that at the moment, as Imgur is blocked where I am at the moment.

Have you ever tried using the built-in Codepen linter at all? You can find it in the pen settings on the JavaScript tab

948×506 35.1 KB

If you click that, your own JS will be highlighted with the errors the linter has found

576×410 23.4 KB

That should hopefully help you with any issues it’s discovered.

1 Like
5

You probably need to position them absolutely in relation to the container that holds the slider. Add position:relative; to the parent (probably #owl-slider) and then place the left at arrow at top:50% and left:0 and the right arrow at top:50% and right:0; both using position:absolute. You can add a negative margin-top equal to half the height of the arrows to get them perfectly central.

It would be easier to debug if you could supply all the code and get a working demo in codepen.:slight_smile:

1 Like
6

You mention jQuery, and the JS you’ve put in the pen suggests you need it, but when I checked the settings, I noticed you’ve not linked to it (see the drop-down near the bottom of the JS settings modal).

Also, I see the following in the CSS

background: url(../img/carousel-arrow-prev.png) no-repeat center center;

Unless you have a Codepen Pro account, then that’s not going to work, as you can’t upload the PNG files to a free account. You’d need to be linking off to another site where they’re being hosted for you.

7

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