Я использую Bootstrap Vue для создания моей карусели. Карусель содержит 3 изображения, которые позволяют пользователям перемещаться. Я могу отображать изображения, которые соответствуют высоте и ширине экрана моего ноутбука. Однако, поскольку я медленно уменьшаю размер экрана до мобильного, высота больше не опускается до экрана. Ниже приведены мои коды и скриншоты
Обновление: я все еще не могу решить эту проблему, может кто-нибудь здесь меня?
<template>
<div>
<b-carousel
id="carousel-1"
v-model="slide"
:interval="4000"
controls
indicators
background="#ababab"
style="text-shadow: 1px 1px 2px #333;"
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
>
<!-- Text slides with image -->
<b-carousel-slide
caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img-src="https://source.unsplash.com/LAaSoL0LrYs/1920x1080"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://source.unsplash.com/bF2vsubyHcQ/1920x1080">
<h1>Hello world!</h1>
</b-carousel-slide>
<!-- Slides with image only -->
<b-carousel-slide img-src="https://source.unsplash.com/szFUQoyvrxM/1920x1080"></b-carousel-slide>
</b-carousel>
<p class="mt-4">
Slide #: {{ slide }}
<br>
Sliding: {{ sliding }}
</p>
</div>
</template>
<script>
export default {
data() {
return {
slide: 0,
sliding: null
};
},
methods: {
onSlideStart(slide) {
this.sliding = true;
},
onSlideEnd(slide) {
this.sliding = false;
}
}
};
</script>
Экран рабочего стола:
Экран мобильного телефона:
