I am working on a swiper that displays images specified in an array. However, I need to include text within these images, and I'm struggling to find a solution for this. Does anyone have any insight on how to achieve this?
HTML
<template>
<div>
<div v-swiper:mySwiper="swiperOption" @someSwiperEvent="callback">
<div class="swiper-wrapper">
<div class="swiper-slide " v-for="banner in banners" :key="banner">
<img :src="getImage(banner)">
</div>
</div>
</div>
</div>
</template>
Javascript
export default {
data() {
return {
banners: [
'Block1.png' , 'Block2.png' , 'Block3.png' ,'Block4.png'
] ,
words :[
'ABOUT AS' , 'WE OFFER' , 'OUR STAFF' , 'PORTFOLIO'
],
swiperOption: {
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: -400,
pagination: {
el: '.swiper-pagination',
clickable: true
}
}
}
},
methods : {
getImage(src){
return require(`~/assets/image/banners/${src}` )
},
callback (){
},
addWords(){
},
},
}