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

1 Like

Hey, just want to quickly hop on and say THANK YOU @chaostorm for your instructional write-up. I got it to work because of this comment.

I think something needs to be done about plugins that are abandoned. Either they need to be completely deleted from the marketplace (if they don’t work), or switched to open-source (if they do work). It would avoid similar situations like these.

Thanks again!

1 Like

@wesfrank My pleasure! I’m glad you found the walkthrough useful.

1 Like

Thanks for this walk through. Could you advice what I’m doing wrong with my set up?

  • Created a group with id “flickity-carousel”. Inside flickity-carousel Group I created three further groups (column layout) that overlap. Each of these three groups has a text field.
  • Created workflow with pause of 1000 ms, then set up Flickity-Carousel step like you described.

Preview is showing all 3 text groups, with no arrow or ability to scroll. I presumed it would show one group and provide the ability to click through to the other groups within the “flickity-carousel” group.

@andrewmccalister My pleasure! As for your question, I haven’t tried yet if the plugin works with the new responsive engine. Given it’s no longer in active development, it may very well not.

@andrewmccalister Follow-up: I’ve taken a quick look at this and, quite frankly, if I needed a carousel/slider that works with the new responsive engine today, I’d probably just grab Element Slider instead. (Or Element Slider Pro if you need a few extra features.)

1 Like

Thanks @chaostorm.

Using Element Slider and looks to be solid solution, however I’m having a layout issue. In Preview only a portion of the slider is showing.

Set up as a fixed element (the creator of Element Slider stated it must be done like this), that contains two rows (each of them a slide) and the Element slider.

In preview the entire row seem to be compressed, meaning some content isn’t visible.

Any idea what I’m doing wrong?

@andrewmccalister

  • It’s not just the Group carousel that needs to be Fixed for this to work, but the children elements as well (i.e. the slides themselves). In the screenshot you posted, at least one of them—Group BTC—is a Row.
  • Check what the width of the ElementsSlider is, as that element will act as the viewport for your carousel.

Hope that helps!

Slightly off-topic: one of the things I’d personally love to see in the Elements Slider plugin is support for partial view of the slides like this:

unnamed

I contacted the developer of the plugin recently and he pointed me towards Slick Slider, so I guess the only way to achieve the effect above currently is to manually build the slider.

Quite frankly, it’s a little bit surprising Bubble has been around for as long as it has and there is still no robust group slider plugin, official or otherwise, that covers these common use cases.

1 Like