У меня есть слайдер (vue-awesome-swiper), который имеет ширину 100vw (100% ширины экрана).
Проблема в том, что если я захочу сменить слайд (прокрутить по слайдеру пальцем/мышкой), то он не прокручивается, но если я начну прокручивать не с середины, а, например, с конца, то все нормально.
Как я понял мне нужно изменить параметр threshold, в интернете смотрел, сказали, что нужно устанавливать значение 0.05, но это не работает
Разметка
<clientOnly>
<swiper class="swiper__wrapper" :options="sliderOptions" ref="mySwiper">
<swiperSlide
class="slider__slide"
v-for="(slide, index) in works.map((work) => work.name)"
:key="index"
>
<h3 class="loading-title">Загрузка</h3>
<video
ref="videoSlide"
class="slider__slide-video"
muted
playsinline
loop
autoplay
:data-src="require(`@/static/videos/${slide}`)"
@canplay="
loadVideo(
$event.currentTarget,
$event.currentTarget.parentNode.querySelector('h3')
)
"
@loadstart="
loadStart($event.currentTarget.parentNode.querySelector('h3'))
"
></video>
</swiperSlide>
</swiper>
</clientOnly>
JS
<script>
export default {
data() {
return {
works: [
{ title: "work1", name: "1920x1920.mp4" },
{ title: "work2", name: "1920x1920 (2).mp4" },
{ title: "work2", name: "IMG_8461.MP4" },
],
sliderOptions: {
centeredSlides: true,
speed: 500,
simulateTouch: true,
threshold: 0.04,
slidesPerView: "auto",
},
};
},
methods: {
loadVideo(target, title) {
target.classList.add("project--show");
title.classList.remove("project--show");
},
loadStart(title) {
title.classList.add("project--show");
},
},
computed: {
getSwiper() {
return this.$refs.mySwiper;
},
},
};
</script>