CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Andy
Andy

Reputation: 384

Moving pagination buttons in Owl Carousel

I'm trying to move the pagination buttons/dots outside of the container div and into an outside div, so that I can have them positioned as shown below:

enter image description here

Things I've tried:

-upgrading to Owl Carousel 2. This basically destroyed the carousel and caused some very strange problems that I couldn't fix.

-moving them with jQuery. They did move but they vanished - they could be seen in the DOM when using inspect element, but didn't actually show up on the page at all.

Upvotes: 0

Views: 13803

Answers (3)

codex
codex

Reputation: 1

Firstly, give your container position: relative. Secondly, give your dots position: absolute; top: 0; right: 0;

That's all.

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

Try something like this (if i understand you want dots to be on top right side)

.owl-pagination {
  position: absolute;
  right: 0;
  top: -50px;
}

Upvotes: 2

Jon Mateo
Jon Mateo

Reputation: 384

Try applying position absolute in the pagination class or id and edit the top to position the pagination in your desire

Upvotes: 0

Related Questions