Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как в слайдере запретить свайпить, но, разрешить тач-события внутри элементов? (https://javascript.ru/forum/misc/85946-kak-v-slajjdere-zapretit-svajjpit-no-razreshit-tach-sobytiya-vnutri-ehlementov.html)

giwuf 20.06.2024 21:14

Как в слайдере запретить свайпить, но, разрешить тач-события внутри элементов?
 
Есть необходимость в slick слайдере в мобильном разрешении отключить свайп событие на слайдах при пролистывании (листание только по буллетам), но сделать возможным тач события внутри элемента (на примере перетягивания ползунка заданного диапазона или, как вариант, масштабирование картографических карт внутри элементов слайдера).

Как это можно сделать? Свайп удалось отключить с помощью swipe: false, а вот ползунок срабатывает только при прокликивании по нему, но не перетягивании

$('.slider').slick({
  slidesToScroll: 1,
  mobileFirst: true,
  dots: true,
  cssEase: 'linear',
  touchMove: false,
  responsive: [{
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        swipe: false,
        swipeToSlide: false,
        //touchMove: true,
      }
    },
    {
      breakpoint: 992,
      settings: {
        slidesToShow: 2,
      }
    }
  ]
});

<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="slider">
  <div>
    <input type="range">
  </div>
  <div>
    <img class="img-fluid" src="https://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
  <div>
    <img class="img-fluid" src="https://kenwheeler.github.io/slick/img/fonz3.png" />
  </div>
</div>

.img-fluid {
  max-width: 100%;
  height: auto;
}


demo

deniscikasov@gmail.com 21.06.2024 21:45

Может поможет
Сгенерировано - https://www.blackbox.ai/chat/expert-javascript
$('.slider').slick({
  slidesToScroll: 1,
  mobileFirst: true,
  dots: true,
  cssEase: 'linear',
  responsive: [{
    breakpoint: 480,
    settings: {
      slidesToShow: 1,
      swipe: false,
      swipeToSlide: false,
      touchThreshold: 1000
    }
  }, {
    breakpoint: 992,
    settings: {
      slidesToShow: 2
    }
  }]
});

giwuf 22.06.2024 14:06

Цитата:

Сообщение от deniscikasov@gmail.com
touchThreshold: 1000

Спасибо за попытку помочь, но, к сожалению, это не срабатывает..
демо


Часовой пояс GMT +3, время: 20:43.