@alexandr-web
Программист

Как исправить проблему с threshold в vue-awesome-swiper?

У меня есть слайдер (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>
  • Вопрос задан
  • 137 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы