Как решить такую проблему со свайпом слайдера?

Question

[Max89]

Здравствуйте. Использую вот этот сладйер splidejs, но некорректно работает свайп, а именно прокручивается вся карусель, а не только изображение внутри слайда. Можно ли как то внести исключение для свайпа?

Comments

[xdevelx]

https://github.com/Splidejs/splide/issues/104#issu...
Здесь автор слайдера объясняет, почему такое поведение нельзя реализовать.

Answer 1

[Владимир]

Создать issue тут
https://github.com/Splidejs/splide/issues
или поправить исходный код самому тут
https://github.com/Splidejs/splide
Можно еще попробовать стать спонсором, возможно появится опция технической поддержки, но я не видел такой опции на сайте

Answer 2

[Daniyar1997]

Используйте
https://swiperjs.com/

Прост в использовании и настройке. Свой текущий слайдер можете быстро перенастроить.
https://swiperjs.com/swiper-api#initialize-swiper

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

Там есть отдельный модуль free-mode, управляющий свободным свайпом.
https://swiperjs.com/swiper-api#free-mode

Comments

[Max89]

Пробовал, но он с Nuxt не работает...

[Daniyar1997]

Max89, к сожалению, с nuxt не работал.
Поддержка vue есть, значит и в nuxt его можно запихать, по идее.

Может быть там можно развязать часть кода?!