Building a caroussel from RG - special behaviour

Need help Mobile
21

Found a way to do it manually (in addition to the plugin) :

  1. add an html element in your editor
  2. add the following style in your html element :

#{RG-ID] ::-webkit-scrollbar {
display: none;
}

Et Voila ! No more scroll Bar !

22

Hello,

Thank for looking into this, this works perfectly in Safari desktop, but not in iOS :frowning:

23

weird. This worked for me on Safari on my Iphone

24

Hmm… Did you add this code on demo page?

25

just did. Check it

26

This works! I’ve been doing something wrong then on my end.

Thanks, I will get a plugin and try.

1 Like
27

How did you create an infinite scroll carousel?

28

It looks like the entries snap right? Can you provide details how you made it work? Did you need to add to the CSS code? If yes, where do you include it in bubble?

Cheers

29

@tobias2 and @tona A little bit of CSS and a free plugin. You can find the instructions here - https://nocodeassistant.com/creating-a-carousel-in-bubble-io/

30

Thank you very much for the information!

31

Can you please add this to the plugin as well? Always helps to have one thing less to keep track of manually. :slight_smile:

32

Hi everyone, just to let you know, if you liked our RG to snap plugin ==> you can go on our plugin request platform so that we can :

  • Create new plugins on demand, depending on votes
  • Add features missing in our existing plugins (many of you asked for some already)

meet you there : https://no-cod.bubbleapps.io/

33

hi @pro.sc.conseils ! Thanks for the plugin. Going to check it out later today.

Question — is there a way to tell what element in the repeating group is ‘snapped’? I am trying to have back and forth arrows along with the horizontal scroll. The forward arrow would be smart enough to understand which item is ‘next’ to scroll to, even if the user scrolls with their finger and then clicks the arrow.

You can see this behavior on airbnb in the top section here: https://www.airbnb.com/s/experiences/online

thanks!

Jack

34

I only read the title of this thread and it reminded me of this little piece of internet snark: https://shouldiuseacarousel.com/

2 Likes
35

Hello, there is no built-in feature for that in the plugin right now.

At the moment i would use arrows and add a custom state “snap position” on your repeating group
Each time you hit the right arrow, you add +1,
each time you hit the left arrow you remove 1

that way you know the position in real time

36

Thanks @pro.sc.conseils !

That makes sense but the problem is that it is a horizontal repeating group so users could scroll and move the repeating group without using the arrows. Therefore, the ‘snap position’ variable wouldn’t always be accurate.

I think its safe to say that a user is either going to try and use arrows to navigate the repeating group, or use the horizontal scrolling. So not the end of the world.

Thanks again for the plugin!

Jack

37

Hey, we will consider this.
Would you mind adding your idea in this section of our website : Your Bubble app

We might add it on the roadmap soon

Thanks :slight_smile:

38

It’d also be great to decrease the size of the 50x50 RG to Snap element. Not sure why it has to be so big — definitely a pain to work around with mobile design. thanks again @pro.sc.conseils !

39

hey @jack211 makes sense.
Will keep you posted about that

40

Hello @pro.sc.conseils !

I have an issue with the plugin where It doesn’t work with Vertical rgs and only works with horizontal snapping!