Как сделать swiper с кнопками внутри?

Question

[leeroyjenkins176]

Мне необходимо вывести горизонтальный ряд кнопок с поддержкой тач-прокрутки и скроллбаром. Решил для этого использовать swiper, так как он уже был подключен на сайте. Но оказалось, что он очень криво работает, если в слайды состоят из кнопок. А именно:
- на пк мышкой практически невозможно проскролить плок, потянув курсором
- очень часто при клике на кнопку позиция слайдов самопроизвольно смещается

Может кто знает, это как-то фикситься настройками? Или предложите легковесные аналоги под мои цели.
Видел похожую проблему, но она была закрыта без ответа https://github.com/nolimits4web/swiper/issues/6934

Comments

[Andrey Vasilev]

А зачем нужны слайды из кнопок? Почему нельзя сделать подобное через какой-нибудь стилизованный < div > и навешать обработчик? Я думаю такой подход бы решил проблему

[leeroyjenkins176]

Andrey Vasilev, это готовое решение, которое полностью подходит под мою задачу. При условии, что оно корректно работает.
А так придется самому реализовывать тач прокрутку с помощью мыши, кастомный скроллбар. Есть опасения, что я не знаю каких-то нюансов, и мое решение не будет работать правильно на всех устройствах.

[Andrey Vasilev]

leeroyjenkins176, я не говорю убирать свипер, я говорю заменить содержимое слайдов

[leeroyjenkins176]

Andrey Vasilev, не правильно изначально понял ваше сообщение. Сейчас попробую вариант с div

[Andrey Vasilev]

leeroyjenkins176, да, попробуй хотя бы скелет сделать с дивами и покрутить, если всё окей, то просто стилизуй сами дивы и подпишись на события нажатия элемента

[leeroyjenkins176]

Andrey Vasilev, да, все работает. Спасибо за совет

[Andrey Vasilev]

leeroyjenkins176, :)

Answer 1

[Andrey Vasilev]

Вопрос решен в комментариях выше

А зачем нужны слайды из кнопок? Почему нельзя сделать подобное через какой-нибудь стилизованный < div > и навешать обработчик? Я думаю такой подход бы решил проблему

Answer 2

[leeroyjenkins176]

Нашел ответ в документации, в секции передаваемых параметров:
Name: focusableElements
Default:

'input, select, option, textarea, button, video, label'

Description: CSS selector for focusable elements. Swiping will be disabled on such elements if they are "focused"