I use the vue3-carousel package in my vue project.(v0.3.1) https://www.npmjs.com/package/vue3-carousel
I implemented a simple carousel with the following code;
App.vue
<script setup lang="ts">
import { Carousel, Slide, Pagination } from 'vue3-carousel'
import 'vue3-carousel/dist/carousel.css'
</script>
<template>
<div class="myContainer">
<carousel :items-to-show="1">
<slide v-for="slide in 10" :key="slide"> Slide index {{ slide }} </slide>
<template #addons>
<navigation />
<pagination />
</template>
</carousel>
</div>
</template>
<style scoped>
.myContainer {
width: 90%;
background-color: red;
position: fixed;
bottom: 0%;
}
</style>
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
My error case is like the following;
1- I can use the carousel well in the portrait mode of my iPhone simulator the device
2- After I change the device orientation to portrait it doesn't properly.
3- After the other orientation changes it still doesn't work well.
I attached a demo video to the linkIt seems about container fixed position but I don't understand why fixed position couses and what this parameter breaks. Thanks.