owl-carousel - 将点放在 Owl Carousel 上而不是下面

Question

似乎默认情况下，Owl Carousel 将代表每张幻灯片的点放在旋转木马下方，而不是底部的内部。我发现我可以给它们添加负边距，它们会进入旋转木马，但它们落后于它有效地使它们变得无用。我想不出让它们出现在顶部的方法。有什么想法吗？

Answer 1

虽然您的问题通常应该用更高的 z-index 来解决，但您可以将轮播设置为 position: relative; 并将 dots-div 与 position:absolute；。

另一种方法是使用 JS/jQuery 和 $('.owl-dots') 移动 div。

我构建了一个选项，将圆点克隆到每张幻灯片中。唯一的问题是您还需要一个新的 click 和 changed 事件。

我的方法是:

var owl = $('.custom1').owlCarousel({
    animateOut: 'slideOutDown',
    animateIn: 'flipInX',
    items:1,
    margin:30,
    stagePadding:30,
    smartSpeed:450,
    loop: true,
    dots: true,
    autoplay: true,
});

// Clone dots into slide
var dots = $('.owl-dots');
$('h4').after(dots.clone().addClass('owl-dot-clone'));
dots.hide(); // hide orginal dots

// Set active
owl.on('changed.owl.carousel', function (event) {
    var index = event.page.index;
    $('.owl-dot-clone .owl-dot', this).removeClass('active');
    $('.owl-dot-clone', this).each(function () {
        $('.owl-dot', this).eq(index).addClass('active');
    })    
});

// Create on click event for clone
$('.owl-dot-clone .owl-dot').on('click', function () {
    var owl = $(this).closest('.custom1');
    owl.trigger('to.owl.carousel', [$(this).index(), 300]);
});

.owl-dots.owl-dot-clone {
    margin-top: 80px;
}

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/animate.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<section id="demos">
<div class="custom1 owl-carousel owl-theme">
  <div class="item"><h4>1</h4>
  </div><div class="item"><h4>2</h4>
  </div><div class="item"><h4>3</h4>
  </div><div class="item"><h4>4</h4>
  </div><div class="item"><h4>5</h4>
  </div><div class="item"><h4>6</h4>
  </div>
</div>
</section>