html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
#app{
.wrapper{
width: 600px;
height: 450px;
}
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
View Compiled
const {ref, reactive, onMounted, watch, nextTick } = Vue
const App = {
setup(){
const images = ref([]);
let swiper = null
watch(images,(newVal)=>{
nextTick(()=>{
swiper.update()
})
});
onMounted(async function(){
await axios.get('https://run.mocky.io/v3/fe4354a8-0cfb-4de0-9a39-8a2504f996cf').then(res=>{
images.value = res.data
})
swiper = new Swiper('.swiper-container', {
pagination:{
el:'.swiper-pagination'
}
});
});
return { images };
}
};
Vue.createApp(App).mount("#app")
