How to make a horizontal menu with a swipe?

Question

Apple Developer Program

Hello!

Please tell me, are there any ready-made solutions for a horizontal menu with a slope (more precisely, a swipe)?



It is necessary that if the menu does not fit into the width of the parent container, then the menu items do not go to the second row, but hide and the menu can be scrolled horizontally

. x: scroll - not suitable(

Answer 1

Do nothing. Try from another account . Well or so

Answer 2

Use swiper. Everything is in the doc and examples. Including for such a situation

Answer 3

Just solved the same problem. Wrote a class that is responsible for horizontal scrolling.
The essence is simple - we listen to mousedown on the block, mousemove on the document, then we set the scrollLeft to the block depending on the mouse movement.
Any block will have overflow-x: auto, you just need to additionally set for this block

::-webkit-scrollbar
  display: none

On mobile, it will work just with these css properties, but on desktop, you will have to get confused with listening to events. Taking a third-party library for sliders is complete nonsense. You can write your solution here much easier and concisely.
UPD: I'll add some details.
At the html level it would be something like this:

<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 // запрещаем переносить элементы при переполнении блока
}