Есть необходимость в 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
