我如何才能将.owl-分页主猫头鹰包装之外? OwlCarousel2(How can I mo

2019-10-21 12:56发布

如果是.owl-分页移至主猫头鹰包装之外的另一格一个简单的方法将是巨大的。 不知道是否有做到这一点的简单方法?

Answer 1:

它的工作原理与标准选项:navContainerdotsContainer

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

对于OwlCarousel2问题663 , 全屏结果的jsfiddle



Answer 2:

您可以初始化后,移动导航,就像这个例子: 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)
    }
  });

});


文章来源: How can I move .owl-pagination outside the primary owl wrapper? OwlCarousel2