如何使用 Swiper Vue.js 创建垂直滑块？

Question

我正在使用 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, Autoplay,Pagination]);
export default {

  data(){
   return{
     fixedheader:false,
   }
  },
  components: {
    Swiper,
    SwiperSlide,
  },

  methods:{
    showVideo(){
       this.$store.commit("CheckvideoVisibility", false)
    },
    onSlideChange() {
        console.log('slide change');
      },
  },
   
  
};
</script>

`

Answer 1

我有办法 如果有人遇到同样的问题：您只需要将 'vertical' 放在单引号中。 它在 Vue 模板中看起来像这样：

<swiper 
  :slides-per-view="1"     
  :space-between="0"
  :direction="'vertical'"
>