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:

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.

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:

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.

• javascript
• jquery
• html
• css
• twitter-bootstrap

• Could you please provide your current HTML, CSS & any javascript affecting this so we can advise the changes you need to undertake? – James T Commented Sep 15, 2015 at 8:50

3 Answers 3

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

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

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

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

That's all.