How Can I Move .owl-pagination Outside The Primary Owl Wrapper? Owlcarousel2

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?

Solution 1:

It works with standard options: navContainer and dotsContainer

html

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

javascript

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

   // other OwlCarousel2 options
})

For OwlCarousel2 issue 663,

Solution 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)
    }
  });

});