Make mobile slider move with swipe

Trying to give a little more feed back for users with the mobile slider. It seems if you swipe a slider to the side, the slider advances to the next slide. It would be nice if the slide would move with the users finger to show them the gesture is working. Any way to create this functionality or does anyone have a good slider replacement that works like this?

Hi Will. At the moment we don’t have that kind of behavior but we want to build it in when we get the chance. Thanks for the feedback!

1 Like

Take a look att this script Photoswipe. I know you guys can build this and better aswell =) but its opensource and works very well. It have a nice feeling on mobile when you are able to swipe through images this way. Not a key feature, it work very well as it is. Cheers =)

2 Likes

Hi guys,

Has this been implemented yet before I go hunting for another option?

Best
James

I would like to see this functionality implemented too.

The side swipe UI pattern is a very usable way of preventing long scrolling pages on mobile.

See the ‘latest in formula 1’ section at the formula1 site for an example of what I mean (view on mobile or narrow browser or see image attached). Notice how when you swipe on mobile (or click-drag if viewed on desktop) - the panels ‘live’ scroll when swiped. This UI pattern can also be seen on the Apple app store.

The current implementation of the slider in webflow has a delay when swiping which somewhat diminishes the user experience.

Does anybody have a working version of something like this or @thesergie do you know if any of the webflow javascript wizards have any tweaks to the current slider we can try out to get this working?

Thanks.

More examples:

This demo uses the JQuery iScroll script

Another example is swiper

https://dl.dropboxusercontent.com/u/135388/hosted/Screen_Shot_2016-02-23_at_08_55_25.png

Hi Matt,
Did you ever get a continuous drag slider to work? Thanks

Hi @Simon_Lessing – no, I ended up just using a container wider than the viewport with overflow: scroll to give horizontal scrolling – it ‘worked’ for what I needed, but I would like the ‘snapping’ effect where each card or bit of content moves then snaps in position on swipe – I saw this on github recently and planned on trying it out next time I need this functionality. I’ve not got to try it yet, but maybe it will help you :slight_smile:

1 Like

Thanks!
Didn’t know of CSS Snap Points but that does look nice. Would that
implementation cover Chrome with polyfills as well? Sorry, I have such a
hard time unpacking Github code… :scream:

Simon Lessing

The demos seem to work fine for me – at least on safari iOS and chrome iOS (the usual click controls for desktop too, but I’ve not tested on Android yet).

Well chrome ios unfortunately is forced to use apples webkit engine, so
it’s actually safari with the chrome chrome :wink:

Simon Lessing