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 Likes
2

Anyone ?

3

I’m looking for this too !

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 !

3 Likes
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 !

2 Likes
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:

3 Likes
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

3 Likes
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?

1 Like
16

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

1 Like
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.

2 Likes
18

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

1 Like
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.