1
我正在使用猫头鹰传送带图像滑块的网页上工作。然而，他们对屏幕大小调整没有很好的反应，而我之前在其他工作正常的页面上使用过它们。我已拍摄了我的屏幕视频以演示问题：LINK TO VIDEO HERE。任何帮助，这真的很感激。猫头鹰传送带图像幻灯片不能很好地调整大小
HTML：
<div class="module__container--half flex__responsive">
<div class="module__container--item">
<div class="owl-carousel owl-theme filler__slider filler__slider--one">
<div class="item filler__img--full filler__img--one"></div>
<div class="item filler__img--full filler__img--four"></div>
</div>
</div>
<script>
$('.owl-carousel').owlCarousel({
loop:true,
center:true,
autoWidth:true,
margin:0,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
</script>
<div class="module__container--item tablet__adjust animatedParent animateOnce" style="display: flex; display: -webkit-flex;">
<div class="filler__content--slider" style="margin-left: 0px !important;">
<div class="standard__content filler__content filler__content--one animated fadeInRightShort delay-375">
<h3 style="text-align: left;">FILLER SECTION</h3>
<p class="h6 standard__content--text" style="font-weight: normal; text-align: left;">Short introduction of the client and description of the completed project. This should be anywhere from 3-5 lines. If longer, break into sections based on client background and project overview. Lorem impsum dolor sit amet, quo modo tincidunt no, partiendo adipiscing no. Lorem impsum dolor sit amet, quo modo tincidunt no, partiendo adipiscing no. Lorem impsum dolor sit amet, quo modo tincidunt no, partiendo adipiscing no. Lorem impsum dolor sit amet, quo modo tincidunt no, partiendo adipiscing no.</p>
</div>
</div>
</div>
</div>
CSS：
.filler__slider, .filler__slider .owl-stage-outer, .filler__slider .owl-stage-outer .owl-stage, .filler__slider .owl-stage-outer .owl-stage .owl-item {height: 100vw !important;}
.filler__slider .owl-stage-outer .owl-stage .owl-item {width: 100vw !important;}
.filler__slider .owl-nav {display: flex !important; margin-top: -50px !important;}
.filler__slider .owl-nav .owl-prev, .filler__slider .owl-nav .owl-next {z-index: 1000 !important;}
.filler__slider .owl-nav .owl-prev {transform: rotate(180deg);}
.filler__slider .owl-nav .owl-next {transform: rotate(0deg);}
.filler__slider {overflow: hidden !important;}
.filler__slider--one .owl-nav {justify-content: flex-end !important; padding-right: 30px;}
.filler__slider--four .owl-nav {justify-content: flex-start !important; padding-left: 30px;}
.filler__content {margin: auto !important; position: relative; padding-top: 20px; padding-bottom: 30px;}
.filler__img--full {background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vw; width: 100%;}
.filler__img--one {background-image: url(images/template_filler_one.png);}
.filler__img--two {
padding-top: 30px;
padding-bottom: 30px;
width: 522px;
margin: auto;
position: relative;
width: 85vw;
}
.filler__img--three {
width: 516px;
margin: auto;
position: relative;
padding-top: 30px;
padding-bottom: 30px;
width: 80vw;
}
.filler__img--four {background-image: url(images/template_filler_four.png); margin-top: 0px;}
.order__one {order: 2}
.order__two {order: 1}
.filler__content--slider {width: 100%; height: 100%; margin: auto; display: flex; display: -webkit-flex;}