I was able to use the mouse/trackpad swipe action to get this much work on mobile devices in some browsers and it does work on desktop computers ( macOS and Windows ). However, using the mouse roll, I didn’t get it to work.
Is it possible to use local CSS to activate the keyboard slide action? Or perhaps using AlpineJS or local JavaScript for the drop actions?
Swiper Demo .swiper { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; gap: 0; padding: 0; margin: 0 auto; width: 100%; max-width: 600px; overscroll-behavior-x: contain; } .swiper::-webkit-scrollbar { display: none; } .slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; height: 384px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 3rem; border-radius: 12px; } i + 1)"> ![fig]()
What does a roll motion mean?
That is not a typical occurrence.
Javascript recognizes touch events, but not anything called “slide” or “swipe”.
When a person uses the keyboard and hard-presses the left button to move it toward the left, I meant” slip” when on a desktop.
When a person uses the cellular and jabs left, I meant” swipe.” On a computer, the trackpad softly “moves” the finger from right to left while using the swipe menu.
Js is required if you want to use the keyboard drag to create a horizontal slide result. Swiper. As demonstrated in the videos, js can manage that.
On Codepen, I discovered a couple simpler videos that might be useful.