Как в слайдере запретить свайпить, но, разрешить тач-события внутри элементов?
Есть необходимость в 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 |
Может поможет
Сгенерировано - 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 } }] }); |
Цитата:
демо |
Часовой пояс GMT +3, время: 20:43. |