如何解决如何使用 Swiper Vue.js 创建垂直滑块?
我正在使用 Vue3 创建简单的应用程序,我也在使用 Swiprer.js for vue,swiper.js(for vue3) 的文档对我来说是不可理解的,我已经在我的应用程序中导入了所有模块,但现在我想创建垂直可滚动滑块,如下图,我的 swiper 组件看起来像这样:,但仍然无法创建垂直可滚动滑块,这就是我的模板的样子,有什么解决方案吗?
<template>
<div class="container-main-slider">
<div class="container-main-slider__inner" id="sliderBox">
<swiper
:slides-per-view="1"
:space-between="20"
:direction="vertical"
:pagination="{ clickable: true}"
>
<swiper-slide>
<img :src="dynamic content">
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script>
/* swiper slider imports */
import { Swiper,SwiperSlide } from "swiper/vue";
import SwiperCore,{ A11y,Autoplay,Pagination } from "swiper";
import "swiper/swiper.scss";
import "swiper/swiper.scss";
import 'swiper/components/pagination/pagination.scss';
SwiperCore.use([A11y,Pagination]);
export default {
data(){
return{
fixedheader:false,}
},components: {
Swiper,SwiperSlide,},methods:{
showVideo(){
this.$store.commit("CheckvideoVisibility",false)
},onSlideChange() {
console.log('slide change');
},};
</script>
解决方法
我有办法 如果有人遇到同样的问题:您只需要将 'vertical' 放在单引号中。 它在 Vue 模板中看起来像这样:
<swiper
:slides-per-view="1"
:space-between="0"
:direction="'vertical'"
>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。