因此,我目前正在建立一个网站,但OWL Carousel出现问题,当更改滑块上的图像时,图像似乎彼此堆叠,从而导致巨大的空白空间。
在这里可以看到错误:www.hissey-data.co.uk
任何帮助将不胜感激。谢谢。
我提供了以下代码。
OWL轮播代码
$(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>
.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;
}