Owl 轮播中额外的空项目

Question

我知道以前有人问过这个问题，但是 none 的答案被标记为正确答案，但没有人对我有用。我有一个 Owl 轮播，在第一张幻灯片之前（或最后一张幻灯片之后...）有一个空的 space。我尝试了一切，但似乎无法将其删除。任何帮助将不胜感激。

这是用于启动它的代码：

$(document).ready(function () {
    $(".owl-carousel").owlCarousel({
        loop: true,
        autoplay: true,
        autoplayTimeout: 3000,
        nav: true,
        navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
        margin: 10,
        responsive: {
            0: {
                items: 1
            },
            700: {
                items: 2
            },
            1100: {
                items: 4
            }
        }
    })
})

这与 codepen 中的完全相同：

https://codepen.io/sarmadhadi/pen/PoGMbQK

注意在礼物 6 之后和礼物 1 之前有一个额外的元素

Answer 1

问题出在您的 html 上。按钮 prev 和 next 与卡片放在一起，插件将其视为 slide。这会为您创建一个空 space。

将带有按钮的 div 放在 <div class="owl-carousel">...</div> 之外。像这样：

<div class="owl-carousel">
   ...
</div>

<div class="owl-controls">
   <div class="owl-nav">
      <div class="owl-prev">prev</div>
      <div class="owl-next">next</div>
   </div>  
</div>

但这会导致样式出现问题，因为您在 css 中指定了某些选择器。您只需修复 css.

中的选择器

Owl 轮播中额外的空项目

Extra empty item in Owl Carousel

javascript

html

carousel

owl-carousel