Как запретить свайп в слайдере, но сохранить возможность взаимодействия с элементами внутри него?

Как настроить slick слайдер так, чтобы в мобильном разрешении была возможность листать слайды только по буллетам, но при этом оставить доступными тач события внутри слайдов (например, перетаскивание ползунка или масштабирование карты)? Удалось отключить свайп событие с помощью swipe: false, но теперь возникают проблемы с тач событиями внутри слайдов.
  • 20 июня 2024 г. 18:21
Ответы на вопрос 1
Для того чтобы запретить свайп в slick слайдере, но сохранить возможность взаимодействия с элементами внутри него, можно использовать опцию draggable: false. Это запретит пользователю свайпать сам слайдер, но позволит взаимодействовать с элементами внутри слайдов.

Чтобы настроить slick слайдер так, чтобы в мобильном разрешении была возможность листать слайды только по буллетам, можно воспользоваться опцией dots: true и добавить кастомный код для переключения слайдов при клике на буллеты. 

Пример:

```
$('.your-slider').slick({
  dots: true,
  swipe: false
});

$('.slick-dots li').click(function() {
  var index = $(this).index();
  $('.your-slider').slick('slickGoTo', index);
});
```

В данном примере при клике на буллеты будет происходить переключение слайдов, при этом свайп будет отключен. Таким образом, вы сможете сохранить возможность взаимодействия с элементами внутри слайдов.
Похожие вопросы