Update slideshow for swipe control

User 1310395 Photo


Registered User
15 posts

I am a relative beginner at website design but was able to create a decent site for our business using RSD, RCS and the HTML editor. Now I would like to adapt the slideshows so that you can swipe them left or right on a touchscreen. What would be the best approach for making this change? Our site address is www.jamesriverarchitects.com. Thanks for the help.
User 2846109 Photo


Ambassador
341 posts

They should be swipeable right now, Kevin. Try on a table or phone and swipe from the edge to the middle.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 1310395 Photo


Registered User
15 posts

I've tried that and they aren't, at least not on my phone. The links work just fine to the touch, but I can't swipe the images in the slideshows. I finished the current version of the site back in June 2016. Was swipeability built-in at that time?
User 2846109 Photo


Ambassador
341 posts

I'm not sure when it was added but I can swipe the slides in chrome in windows in touch emulation mode. I'll have to check on my phone or ipad too.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2846109 Photo


Ambassador
341 posts

ok, so I can swipe them on my iPad but it's really hard to swipe moving left because the window has a tendency to move up and down which overrides the swipe action. Swiping to the right is much easier for me as there are no UI elements on the right side of the screen.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 244626 Photo


Registered User
811 posts

(I posted this in the tips and tricks some time ago....)

"One of my concerns using RCS was the limiting feature of the touch swipe of the slideshow. It requires the user to perform quite a long accurate swipe across the screen on a mobile device. 50 % of the screen ?

I found that if you edit the slideshow js file that is exported you can adjust the value(s) of the x y axis and the time element.

This makes a slideshow on a mobile device intuitive and responsive.

Search for var touchsurface = el,
and adjust these default settings to something smaller. Save and upload and enjoy the "tweak"
threshold = 150, //required min distance traveled to be considered swipe
restraint = 100, // maximum distance allowed at the same time in perpendicular direction
allowedTime = 300, // maximum time allowed to travel that distance"
Bootstrap 5 CSS Grid.
User 2846109 Photo


Ambassador
341 posts

That's great Twinstream!

That would be a great suggestion to have the option to change those settings in the preferences somewhere.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 1310395 Photo


Registered User
15 posts

Twinstream and Jeff: Thanks for the help. I'll report back after I've had the chance to tweak things and test them out.
User 244626 Photo


Registered User
811 posts

Kevin,

This is what I used if you want a starting point:

threshold = 10, //required min distance traveled to be considered swipe
restraint = 100, // maximum distance allowed at the same time in perpendicular direction
allowedTime = 200, // maximum time allowed to travel that distance
Bootstrap 5 CSS Grid.
User 1310395 Photo


Registered User
15 posts

Thanks, Twinstream. I think part of my problem was that I was not seeing correctly what was happening. Since the slideshows are automatic and the pictures slide in from the left and then fade out, the swipes don't have an immediate affect like they do on static images. I finally noticed that swiping the slides on my phone did speed up the transition to the next image and that's what finally clued me into what was happening. I'm going to redo the pages without the timed slide animation and just let the user manually advance the images.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.