#slider #swiper #vuejs3
#ползунок #swiper.js #vuejs3
Вопрос:
Я создаю простое приложение, используя Vue3, также я использую Swiprer.js для vue, документация swiper.js (для 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> `
Ответ №1:
У меня есть решение, если кто-то столкнулся с такой же проблемой: вам просто нужно заключить ‘vertical’ в одинарные кавычки. В шаблоне Vue это будет выглядеть так:
<swiper
:slides-per-view="1"
:space-between="0"
:direction="'vertical'"
>