Javascript 猫头鹰转盘堆叠图像

因此，我目前正在建设一个网站，我有一个问题与猫头鹰转盘，似乎是堆叠的图像时，改变滑块上的图像，导致在一个巨大的空白空间

错误可以在这里看到：

任何帮助都将不胜感激。谢谢

我提供了下面的代码

猫头鹰转盘代码

$(document).ready(function() {
  $("#owl-banner").owlCarousel({
      nav : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      items: 1,
      singleItem: true,
      dots:false,
  });
});

HTML

<div class="owlWrapper">
    <div id="owl-banner" class="owl-carousel owl-theme">
        <div class="item"><img src="images/Banner.png" alt="slider 1"></div>
        <div class="item"><img src="images/Banner.png" alt="slider 2"></div>
        <div class="item"><img src="images/Banner.png" alt="slider 3"></div>
     </div>
</div>

---

我认为在你的项目中，你可能会忘记添加这两件事

尝试添加这个。您可以看到下面运行的示例

$（文档）.ready（函数（）{
$（“#猫头鹰旗帜”）.owlCarousel({
nav:true，//显示下一个和上一个按钮
幻灯片速度：300，
分页速度：400，
项目：1，
单项：对，
点：错，
});
});
.owlWrapper{
保证金：0自动；
宽度：100%；
高度：自动；
溢出：隐藏；
}
#猫头鹰旗帜。物品图片{
文本对齐：居中；
显示：块；
宽度：100%；
高度：自动；
字体系列：“Lato”，无衬线；
}
.owl-item.active.caption{
转换：翻译（0，-50%）；
}
.猫头鹰导航{
位置：绝对位置；
底部：45%；
左：0；
保证金：0；
宽度：100%；
显示器：flex；
证明内容：之间的空间；
}
.猫头鹰导航按钮{
背景色：rgb（179,20,2）！重要；
边界半径：0%！重要；
宽度：80px；
高度：50px；
显示：内联块；
文本对齐：居中；
线高：50px！重要；
大纲：无；
过渡：所有300毫秒缓解；
}
.owl导航按钮.owl-next{
左边距：0；
保证金权利：100%；
}
.猫头鹰导航按钮跨度{
字号：2em；
颜色：白色；
显示：块；
}
.猫头鹰导航按钮：悬停{
背景：rgb（86,13,5）！重要；
}

感谢您的回复，我已经在本地存储了这些文件
您还有
owl.carousel.min.css
？
是的，这些都存储在标题中。您好，我发现了问题，owl使用了.active类，我的导航栏也使用了一个。一旦我更改了类名，它就按预期工作了。谢谢你的帮助。希望你有一个伟大的一天：D
.owlWrapper{
    margin:0 auto;
    width: 100%;
    height: auto;
    overflow: hidden;
}


#owl-banner .item img{
    text-align: center;
    display: block;
    width: 100%;
    height: auto;
    font-family: 'Lato', sans-serif;
}

.owl-item.active .caption {
    transform: translate(0,-50%);
}

.owl-nav {
    position: absolute;
    bottom: 45%;
    left: 0;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.owl-nav button {
    background-color: rgb(179, 20, 2) !important;
    border-radius: 0% !important;
    width: 80px;
    height: 50px;
    display: inline-block;
    text-align: center;
    line-height: 50px !important;
    outline: none;
    transition: all 300ms ease;
}

.owl-nav button.owl-next {
    margin-left: 0;
    margin-right: 100%;
}

.owl-nav button span {
    font-size: 2em;
    color: white;
    display: block;
}

.owl-nav button:hover {
    background: rgb(86, 13, 5) !important;
}