如何在VueJS中初始化Swiper？
如何在VueJS中初始化Swiper？
提问于 2019-05-07 18:54:28
首先，感谢您的时间，因为我花了整个上午的时间在这个问题上。如何使用vue.JS上的https://idangero.us/swiper模块？事实上，Swiper在页面上，但参数似乎没有被考虑在内。
我也试过vue swiper swiper，但我更喜欢使用没有bug的官方版本。我试图在导入之后的const中初始化swiper。
<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>例如，在下面的代码中，我需要在每个div之间有一个空格，或者只有2行，但我没有空格，只有3行……谢谢你的帮助。
回答 5
Stack Overflow用户
发布于 2020-05-26 00:28:34
你现在可以使用这个Vue Awesome Swiper了，它包含了你需要的一切
您可以使用以下命令安装它
npm install swiper vue-awesome-swiper --save免责声明:我没有从属关系，也没有这个包的贡献者，我只是在使用它。所以我推荐它
Stack Overflow用户
发布于 2020-08-18 18:22:44
您可以简单地使用ref来初始化滑块，如下所示：
<template>
<div>
<div ref="mySlider" class="swiper-container">
…
</div>
<button @click="next">Next Slide</div>
</div>
</template>import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'
export default {
data () {
return {
slider: null,
mySliderOptions: {
loop: true
}
}
},
methods: {
next() {
this.slider.slideNext()
}
}
mounted () {
this.slider = new Swiper(this.$refs.mySlider, this.mySliderOptions)
}
}更新
他们刚刚发布了一款official vue.js swiper component (只有vue.js 3)
Stack Overflow用户
发布于 2020-12-16 14:06:12
这似乎是可行的，但不确定这是不是一个好方法。
父级
<Swiper
:options="carouselOptions"
/>子项(Swiper.vue)
<div v-if="options" ref="swiper" class="carousel-hero carousel-hero--is-hidden swiper-container">...
<script>
import Swiper, { Navigation, Pagination } from 'swiper';
Swiper.use([Navigation, Pagination]);
import 'swiper/swiper-bundle.css';
export default {
name: 'Swiper',
props: {
options: {
type: Object,
default: () => {
return {
slidesPerView: 1
}
}
}
},
data() {
return {
swiper: null,
}
},
mounted() {
let vm = this;
if (this.options && vm.$refs.swiper !== 'undefined') {
vm.$refs.swiper.classList.remove('carousel-hero--is-hidden');
this.swiper = new Swiper(vm.$refs.swiper, {
slidesPerView: this.options.slidesPerView,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
console.log('swiper initialized');
},
resize: function () {
console.log('resize');
}
}
});
}
},
methods: {
}
};
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56020999
复制相关文章
相似问题
腾讯云开发者
