Показать сообщение отдельно
  #1 (permalink)  
Старый 20.06.2024, 21:14
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 167

Как в слайдере запретить свайпить, но, разрешить тач-события внутри элементов?
Есть необходимость в 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
Ответить с цитированием