first of all thank you for your time because I spent all the morning on this issue. How use the https://idangero.us/swiper module on vue.JS ? Indeed Swiper is on the page but the parameters seems to be not taken in count.
I tried also vue awesome swiper but I prefer use the official version without bug. I tried to init swiper also in a const just after the import.
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<v-touch
@tap="navigateTo(item)"
v-for="item in subList"
:key="item._id"
class="swiper-slide"
>
{{t(item.sentence)}}
</v-touch>
</div>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
import 'swiper/dist/js/swiper.js'
export default {
name: 'category',
data () {
return {
subList: [{some data}],
}
},
mounted () {
this.initSwiper()
},
methods: {
initSwiper () {
const mySwiper = new Swiper('.swiper-container', {
slidesPerView: 3,
slidesPerColumn: 2,
spaceBetween: 50
})
mySwiper.init()
}
}
}
</script>
<style scoped>
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
border: solid 2px white;
width: 200px;
height: 200px;
}
</style>
For example with this code I need to have a space between each div or only 2 lines but i have no space and 3 lines... Thank you for your help.
Answer
You can now use this Vue Awesome Swiper it has everything you need
you can install it using the following command
npm install swiper vue-awesome-swiper --save
Disclaimer: I have no affiliation nor a contributor to this package, I'm just merely using it. so I recommend it