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

Question

我正在使用 Vue3 创建简单的应用程序，我也在为 vue 使用 Swiprer.js，swiper.js（对于 vue3）的文档对我来说是不可理解的，我已经在我的应用程序中导入了所有模块，但现在我想创建垂直滚动滑块，如下图所示，我的滑动器组件如下所示：

但仍然无法创建垂直滚动滑块，这是我的模板的样子，有什么解决方案吗？

<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'"
>

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

How to create vertical slider with Swiper Vue.js?

slider

swiper

vuejs3