Currently in the process of developing a custom Vue carousel component, I have utilized some code snippets from this resource: link
My goal right now is to enhance the slider with additional navigation bullets. However, due to the justify-content:center property, it always displays the middle item in my array.
I am attempting to calculate the active item by determining the middle item in my array using the following approach:
<script>
export default {
data() {
return {
slides: [
{
title: 'I am slide A',
featured: 1,
img: '/images/carousel-img.png',
id: 1
},
{
title: 'I am Slide B',
featured: 0,
img: '/images/carousel-img.png',
id: 2
},
{
title: 'I am Slide C',
featured: 0,
img: '/images/carousel-img.png',
id: 3
}
],
activeImage: (this.slides.length / 2)
};
}
}
</script>
Unfortunately, this method does not work as intended. I am stuck at this point and would appreciate any guidance on how to proceed in the right direction.
Thank you.