1
画像スライダーにOwl Carouselを使用しているWebページで作業しています。しかし、彼らは画面のリサイズにはうまく対応していません。以前はうまく動作している他のページで使っていました。私は問題を示すために画面のビデオを撮った：LINK TO VIDEO HERE。これに関する助けは本当に感謝しています。Owlカルーセルの画像スライドが反応しないようにサイズ変更する
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;}