I followed a tutorial on creating card deck groups which can be found here.
Here is the script I used:
<template>
<div class="animated fadeIn">
<b-card-group deck v-for="row in formattedClubs">
<b-card v-for="club in row"
img-src="https://placekitten.com/g/300/450"
img-alt="Img"
img-top>
<h4 class="card-title">
{{club.description}}
</h4>
<p class="card-text">
{{club.price}}
</p>
<p class="card-text">
{{club.country}}
</p>
<div slot="footer">
<b-btn variant="primary" block>Add</b-btn>
</div>
</b-card>
</b-card-group>
</div>
</template>
<script>
export default {
data: function () {
return {
clubs: [
{id:1, description:'chelsea is the best club in the world and chelsea has a great player', price:1000, country:'england'},
{id:2, description:'liverpool has salah', price:900, country:'england'},
{id:3, description:'mu fans', price:800, country:'england'},
{id:4, description:'city has a great coach. Thas is guardiola', price:700, country:'england'},
{id:5, description:'arsenal player', price:600, country:'england'},
{id:6, description:'tottenham in london', price:500, country:'england'},
{id:7, description:'juventus stadium', price:400, country:'italy'},
{id:8, description:'madrid sell ronaldo', price:300, country:'spain'},
{id:9, description:'barcelona in the spain', price:200, country:'spain'},
{id:10, description:'psg buys neymar at a fantastic price', price:100, country:'france'}
]
}
},
computed: {
formattedClubs() {
return this.clubs.reduce((c, n, i) => {
if (i % 4 === 0) c.push([]);
c[c.length - 1].push(n);
return c;
}, []);
}
}
}
</script>
I am now looking to add a slider similar to this example:
https://i.sstatic.net/KwEW0.png
How can I achieve that?