I need to showcase a specific object's field on a dynamically transmitted slider, with the object always positioned in the center of the slider.
Currently, I am utilizing vue-awesome-slider and have the following code:
<v-layout>
<v-flex xs4>
<div >
<p v-html="previewArtefact"></p>
</div>
</v-flex>
<v-flex xs8>
<swiper class="" :options="swiperOption" >
<swiper-slide v-for="(artefact,i) in artefacts" :key="i" v-if="i<5">
<web-artefact-card :artefact='artefact'></web-artefact-card>
</swiper-slide>
<div class="swiper-pagination " slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</v-flex>
</v-layout>
Furthermore:
data() {
return {
previewArtefact:
'<i style="padding-left:10%">The text of the artefact...</i>',
swiperOption: {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
pagination: {
el: ".swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}
};
The slider's central slide is automatically assigned the class '.swiper-slide-active', but I am unsure how to extract the corresponding object from it. The 'previewArtefact' should contain the artefact.text.