Как сделать горизонтальное меню со свайпом?

Question

[Александр Осадчий]

Здравствуйте!

Подскажите пожалуйста, есть какие-то готовые решения горизонтального меню со склолом (точнее свайпом)?



Нужно, чтоб если меню не влазит в ширину родительского контейнера, то пункты меню не заходили на второй ряд, а прятались и меню можно было скроллить по горизонтали..

При этом свайпать (зажимать курсором) так-же с десктопа нужно..просто overflow-x: scroll - не подходит(

Comments

[WapSter]

Засунь в slick slider или swiper

[Александр Осадчий]

WapSter, Так и хотел, тролько в слайдерах слайды одинаковой ширины, а меню у меня - пункты разные

[WapSter]

Александр Осадчий, плохо смотрел

[Alex]

overflow-x: scroll - не подходит(

А почему?

Answer 1

[Алексей]

Используй swiper. В доке и примерах все есть. В т.ч и для такой ситуации

Comments

[Александр Осадчий]

Это было бы лучшее решение..но чего-то я не могу найти(

[Алексей]

Александр Осадчий, ищите в апи отображение нескольких слайдов на экране

[Александр Осадчий]

Алексей, Это есть - параметр:

slidesPerView: 'auto',

Только не работает((

Answer 2

[Андрей]

Как раз решал такую же проблему. Написал класс, который отвечает за горизонтальную прокрутку.
Суть простая - слушаем mousedown на блоке, mousemove на документе, затем задаем scrollLeft блоку в зависимости от перемещения мыши.

У блока по любому будет overflow-x: auto, просто нужно дополнительно задать для этого блока

::-webkit-scrollbar
  display: none

На мобилке будет работать просто с этими css свойствами, а для десктопа придется заморочиться с прослушиванием событий. Брать стороннюю библиотеку для слайдеров - полная чушь. Написать свое решение тут можно гораздо легче и лаконичнее.

UPD: немного добавлю деталей.

На уровне html это будет что такое:

<div class="container">

  <div class="menu">
     <div class="menu-element">Меню</div>
     <div class="menu-element">Еще чето</div>
     <div class="menu-element">И еще</div>
  </div>

</div>

CSS:

.container {
  width: 100%;
  overflow-x: auto;
}

.container::-webkit-scrollbar { // честно, уже не помню как это правильно написать на чистом css
  display: none 
}

.menu {
  display: flex 
  flex-wrap: none // запрещаем переносить элементы при переполнении блока
}