Building a caroussel from RG - special behaviour

Need help Mobile
1

Hello everyone,

I’ve been struggling to build a caroussel that would behave like the one in the apple appstore : a horizontal carousel showing videos and images + when one swipes, it would move to the next cell exactly.

Meaning : I want to suppress the scrolling inertia and make the next cell “stick” to the left side of the screen. (This is my main issue, i guess i can sort the rest out)

I’ve seen nice plugins helping make a carousel but it is dedicated to images only.

Here is the example i recoreded from the appstore :

Thanks to those who can help

2

Anyone ?

3

I’m looking for this too !

vnihoul77 4

:up: :up:

5

Guys, I’ve looked into this. There’s no way to do this totally no-code.

Here’s a great tutorial in one of my fave CSS websites for fun stuff like this. They cover various ways to accomplish the snapping behaviour you’re looking for:

also: welcome to the Bubble forums @pro.sc.conseils !

6

Hey @alejandrowunderlich,

First thanks so much for taking the time to give us hints.
Second… practicaly speaking, I have zero idea how to use this on bubble.
How should I proceed ?

Thanks again for your time !

PS : If anyone is willing to put a plugin that does that on the marketplace, i’d gladly pay for it :stuck_out_tongue:

7

Problem solved ! Its working. Thanks @alejandrowunderlich i would not have succeded without your help !

8

You’re awesome!! Very happy to hear! *high five!*:pray::boom:

I would encourage you to share your solution with the rest of the forum, in case anyone else has the same challenge.

9

Will do first thing tomorrow :slight_smile:

10

Just poking you here to see if you’ve had time to write up the solution you found :slight_smile:

11

Glad to here that you found out how to put all this into bubble. Please share the solution

12

@akhlaqlps007 @casheets123 https://nocodeassistant-tutorials.bubbleapps.io/version-test/carousel

Does this work for you?

13

@sharma.himanshu0608 I don’t think this was the intent - we want scroll snapping here, not just an infinite scroll.

@pro.sc.conseils great you figured it out! I was toying around with it and I effectively can’t get past the .rows child being an absolute width…
image

Seeing as the scrolling group is the .RepeatingGroup and the immediate child is a single instance of .rows, the only method of “scroll snapping” is to set absolute values on snap for that one element, which will never work responsively for horiz. scrolling. I guess you could work out the distances manually, or since all .group-item instances are the same size, you could use repeat(calculated_value+px) and get the width with jquery, but that seems like a lot of janky work for something that should be available more easily. So I’m looking forward to seeing how @pro.sc.conseils did it :crossed_fingers:

14

Hey guyz, was busy building a plugin for that. Will give you update when Bubble approves it

15

I have built a plugin for RG caroussel in the past and the main issue I was facing is to readjust element under the caroussel to fill the gap leave by rows that was merged into the caroussel.

@pro.sc.conseils Did you figure this part?

16

@pro.sc.conseils any updates on your plugin?

17

Hey Guyz, the plugin is available.
Hope it’s affordable (had to ask for some help to make it so…)

Please tell me what you think.

18

tutorial is available here : https://no-cod.bubbleapps.io/

19

Great plugin! Congratulation.

iPhone shows a scrollbar when touch and scroll. Have anyone found a JS solution to hide the scroll and leave the scroll functionality?

I have tried all JS codes which is been posted in 2020 and non of them works :frowning:

Please share if you anyone have a solution.

Thanks

20

We will look for a way to remove scrollbar.
Will keep you posted.