猫头鹰旋转木马中的额外空项目答案

【问题标题】：Extra empty item in Owl Carousel猫头鹰旋转木马中的额外空项目
【发布时间】：2021-01-26 13:44:36
【问题描述】：

我知道以前有人问过这个问题，但是没有一个答案被标记为正确的答案，也没有人为我工作。我有一个猫头鹰旋转木马，在第一张幻灯片之前（或在最后一张幻灯片之后......）有一个空白空间。我尝试了一切，但似乎无法删除它。任何帮助将不胜感激。

这是用于启动它的代码：

$(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 之前有一个额外的元素

【问题讨论】：

标签： javascript html carousel owl-carousel

【解决方案1】：

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

将带有按钮的 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 中的选择器即可。

【讨论】：