Forum Academy Marketplace Showcase Pricing Features

New Plugin! Turn Your Groups into a Carousel

Hey everyone,

I’ve been trying to get this plugin to work. Unfortunately, after @ryley.randall had marked it as no longer being updated, he took down the plugin page, video, and instructions, leaving no traces of how to set up the plugin.

I’ve tried digging the instructions out of the sands of time via the Wayback Machine, but no dice - the page wasn’t archived. :slightly_frowning_face:

Now I honestly have no idea where to turn next except to the forum, hoping that one of 3,174 good people who use the plugin will see this post, take pity on yours truly, and share their knowledge. :slight_smile:

My question is very simple - how do I set this thing up?

I know I’m supposed to assign a custom ID to a group and I guess I’m supposed to run the Flickity-Carousel action when the page is loaded to initialize it. However, I don’t know what the plugin description means by saying “a Collection of Groups”. I’ve tried assigning the ID to a Repeating Group, but that didn’t really do anything.

Any bit of information, even a one-liner, would be vastly appreciated. Thanks!

I have built a flickity carousel plugin. But like I said, the main issue is to make Bubble recalculate the page with the collapsed RG. Eveything work except this. I hope that the new Bubble responsive editor may help to solve this issue.

Hi @Jici, Repeating Group to Snap worked for me and I’ll definitely be using it in the future, but unfortunately it’s doesn’t have all the other stuff Flickity does (percentage position, navigation arrows, programatically changing slides, etc.) that I need for a current project.

@ryley.randall was very kind to hop on a quick call with me and help me figure this out (thank you so much), so I’m paying it forward and sharing the missing tutorial for the plugin with the Bubble community. :slight_smile:

Here we go:

  1. Create a group and assign it the ID attribute you want (e.g. flickity-carousel)

  2. Create the groups you want inside the original group. Make them all the same size and have them overlap each other.

  3. Create a workflow action that will initialize the plugin:

Screen Shot 2021-06-17 at 9.47.47 AM

"Add a pause before next action" is of critical importance here! A 500 ms pause seems to do the job, but make it 1,000 ms just to be on the safe side. Without the pause, Bubble just ignores the Flickity-Carousel step, likely because it starts rendering the elements before it fetches the script, which was the reason why all my previous experiments to get this to work hadn’t yielded anything. The rest is pretty straightforward:

Enjoy the carousel!

Screen Shot 2021-06-17 at 9.54.21 AM