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?

回答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,

回答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)
    }
  });

});

来源：https://stackoverflow.com/questions/27817163/how-can-i-move-owl-pagination-outside-the-primary-owl-wrapper-owlcarousel2