How can I move .owl-pagination outside the primary

Question

It would be great if there was a simple way to move .owl-pagination to another div outside the primary owl wrapper. Wondering if there is a straightforward way to accomplish this?

Answer 1

It works with standard options: navContainer and dotsContainer

html

<!-- html custom containers -->
<div id="customNav" class="owl-nav"></div>
<div id="customDots" class="owl-dots"></div>

javascript

$('#owl-carousel').owlCarousel({
    // move navContainer outside the primary owl wrapper
    navContainer: '#customNav',
    // move dotsContainer outside the primary owl wrapper
    dotsContainer: '#customDots',

   // other OwlCarousel2 options
})

For OwlCarousel2 issue 663, Full screen result in JsFiddle

Answer 2

You can move the navigation after init, like in this example: http://owlgraphic.com/owlcarousel/demos/navOnTop2.html

$(document).ready(function() {

  $("#owl-demo").owlCarousel({
    navigation:true,
    afterInit : function(elem){
      var that = this
      that.owlControls.prependTo(elem)
    }
  });

});