Question

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

Answer 1

尽管通常应使用更高的z-index来解决您的问题，但是您可以将轮播设置为position: relative;，并用position: absolute;来放置点距。

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

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

有我的方法：

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>

Answer 2

您也可以使用它。

var dots = $('.owl-dots').css('position', 'absolute').css('bottom', '5px');
dots.css('left', 'calc(50% - ' + dots.width()/2+'px)');

把点放到猫头鹰旋转木马而不是下面

2 个答案: