Why is the pagination not showing up on the image carousel I created with Swiper? Despite being in the DOM, it has a height of 0 and manual changes have no effect. Any suggestions?
import Swiper from '../../vendor/swiper.min.js';
export default {
name: 'ImageCarouselBlock',
components: {
MediaImage,
},
props: {
cmsData: {
type: Object,
default: () => {
return {};
},
},
},
mounted() {
let carouselConfig = {};
if (this.cmsData.auto){
carouselConfig = {
spaceBetween: 30,
centeredSlide: true,
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
};
}
else {
carouselConfig = {
spaceBetween: 30,
loop: true,
pagination: {
el: '.swiper-pagination',
},
};
}
const mySwiper = new Swiper('.swiper-container', carouselConfig);
},
computed: {
images() {
return this.cmsData.images.map( image => {
return {
// TODO maybe get something from amplicence that tells how big they want the carousel to be?
imageData : getMediaAndSources(image.name, '1500'),
};
});
},
},
};
I've tried adjusting the position of the pagination element in the corresponding template but it hasn't resolved the issue. I'm stuck and could use some assistance.
<div class="image-carousel-block">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="image in images">
<media-image preload="true" :sources="image.imageData.sources" :media="image.imageData.media" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>