Forum Academy Marketplace Showcase Pricing Features

New Plugin! Turn Your Groups into a Carousel

I would like to try this out for you. I was trying to do something like that myself. Can you do a full screen carousel? Will that fill the screen from top to botton too? That would be awesome.

This looks like a pretty great plug-in. I’d be very interested to test it. (Of course what we really want in Bubble land is a native RG that could behave like this, right?)

Anyway, I’d not seen that library before and it looks really cool.

1 Like

@J805, it is all based on the sizing of the groups! If you can get a single group to be the size you want, you can make the slider the same size! The plugin is available now publically if you want to try it out and give me some feedback that would be amazing!

@keith, I totally agree! I tried to convert a repeating group into a carousel and had no dice. I hope someone comes up with a solution soon. The plugin is now available publically if you want to try it out!

Thanks!

1 Like

Super cool, Ryley. I’ll check it out soon.

BTW, is there any reason you use unpkg rather than cdnjs as your CDN for the scripts here?

Those are CDN’s they provided in their docs, so I just decided to use them

1 Like

You should read this thread:

It would be much safer if you used CDN JS, the library for your plugin is found here: https://cdnjs.com/libraries/flickity

Or just use Cloudfront (upload the lib you need directly in the plug-in editor) as suggested by emmanuel in the same thread I mentioned. BTW, excellent tip on this courtesy of cobubble that is helpful even to non-plugin builders. See my comment there and following:

I uploaded the files and switched the CDN. Thanks for the heads up.

1 Like

@ryley.randall

I might have a great application for this. I run a Trivia site and looking for beautiful slides to run users selected trivia-questions. We kinda built a custom version of this but its not as pretty. We can replace our code with this and see how we go.

I am at the moment trying to using google slides to make it work offline too. I know this a long shot but is there any way we can download this carousel for offline use? That feature would just open so many doors and is really helpful, at least for me.

@ryley.randall

We are having the below problem of empty slides and appreciate if you can suggest a work around :

We run a Trivia app and tried to use your Carousel to display Trivia questions, one per slide. We placed a group element which acts a carousel and added 10 groups inside the carousel group. But in the instance where there are less than 10 questions there is no way to not display that slide and as a result we are having empty slides. For example user selects only 7 questions, 3 empty slides are being shown as empty at the end.

We think that if we could extract the “Slide Number” variable we might then use it to work around this issue and also to implement other requirements. Is there a way we can access this value ?

1 Like

Is the website with instructions still available? Maybe just need to update the link? @ryley.randall Thanks! :slight_smile:

Isn’t it a paid library… i.e. if the library is used without purchasing their commercial license it violates the terms & conditions?

Edit: Just noticed @ryley.randall had mentioned the same in the main post.

Yeah, you are exactly right.

Unless you are building an open source project that fits within their guidelines

1 Like

Did you delete the plugin? I’m trying to recreate the plugin, but I’m not that versed in plugin building.

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