3D carousel effect?

Questions
1

Hello!

I wish to display a repeating group in a 3D-ish carousel style. But it seems like there’s no plug-in for that.

I see this JS library perfectly does the job. Is it possible to use it in Bubble?

Thanks!
Ohyoon

2

The html element is your friend. Add the Javascript at the end, and generate the html part getting images or cards content from your database or options. That’s what I do, and as a result, without using any RG I get a full bootstrap UI and a 2 seconds max loading, even time, even with tens of images.

Should do a plugin… :grin:

3 Likes
3

@Christophe_HK Thank you for this explanation.
Can you maybe share a editor version of this? :wink:

4

Here it is : https://bubble.io/page?name=index&id=vue-carrousel3d&tab=tabs-1

Bubble doesn’t let you integrate this demo without an iframe, probably due to Vue.js.
So the solution could be to display the carrousel within a HTML / Iframe component.

You just have then to hide the scrollbar, and get your carrousel images from your DB.

5

This is beautiful @Christophe_HK !

Any chance you will make it into a plugin?

1 Like
6

Not sure a plugin is needed there… You could implement your own carrousel, based on the demo app I’ve provided. Also, instead of loading the vue.js library in all your app pages, it will be loaded only in the page where is the carrousel, it’s better for performances purpose.

1 Like
7

Nice demo! :muscle: How do the pictures get into the carousel?

8

No tested yet, this demo app has been made in 5 minutes. Just replace the url of the existing image by your own image url, either a’ external url (copy paste it) either from your DB.

I’ll try to make an amended version of this demo by the day today, with images taken from the DB. I can’t know, my kids claim for chocolate… :grin:

2 Likes
9

Chocolate for kids : check
(Quickly) amended demo with uploaded images in DB : check

Enjoy !

2 Likes
10

I,'ve not spent lot of time studying this library, but enough to make a simple implementation of such a carrousel using your own images.

Use the “do a search” to target your uploaded images, ensure to have an index you calculate each time you upload a new image (use the count built in function). Then use a “format as text” to merge both your uploaded image url and the html code necessary to build the < img > html tag.

I guess you’ll do much better than this demo. Also take care to the path of the javascript files. I just copied the path as-is from the plugin author site, but the best would be to create your own github repository, store the livbrary files into this repository, then use jsdelivr / Migrate from GitHub to jsDelivr to get the JS paths. This way you will “own” the repository, and will ensure the js files remained into.

You can do similar things with any JS livraries and components…

Enjoy !

11

Nice work!!! I’ll make a plugin this week and share for free based on your work!!

Also, I added a pic!

1 Like
12

I am not responsible for the uncorrectly oriented pic uploaded… :smile: :+1:

13

Also, maybe making a plugin would help in getting rid of the iframe? It’s not the best way to display the carousel, but without an iframe I got a “general error”, probably core JS libraries conflicting…

I really have to experiment the plugin builder, I have lot of features in my app that could be interesting for other builders, as a fully responsive masonry gallery with lightbox.

2 Likes
14

Live view

Plugin

Editor

Not perfect, but a start. Definitely not the best documentation to work with!

1 Like
15

Cool!! :+1:t2::+1:t2:

16

hi Chris. Any chance I can have access to view also? Im also looking for a 3d carousel for my project and have been searching for days! Thank you.