[New Plugin] Carousel X 🎠| Your Fun-Filled Journey to Web Carousel Perfection

Showcase Plugins
1

:carousel_horse: Carousel X

Hello, Bubble Developers!

We’re excited to introduce our creation, Carousel X - a plugin that will transform the way you build interactive, visually compelling web applications. We promise, it’ll leave you spinning with joy! :grinning_face_with_smiling_eyes:

For a meager $5 , you get to add a sleek and efficient carousel to your apps. What’s more, we offer short period subscriptions, allowing you to explore the plugin’s possibilities before committing long-term! So, you have all the freedom to try, test and tinker! :bulb:

Two Types of Carousels :arrows_counterclockwise:

With Carousel X, you can create two kinds of carousels:

  • Images Carousel :framed_picture:: Create a beautiful carousel from a list of images you provide. Simply plug and play!

  • Elements Carousel :crystal_ball:: Transform any Groups or Repeating Groups into a carousel. Magic!

:carousel_horse: :eyes:

Here’s a quick peek at our live demo : Carousel X - Elements Slider

You can find the plugin page here :globe_with_meridians::

Configuration Options :hammer_and_wrench:

The plugin offers a plethora of configuration options to fine-tune your carousel to perfection. From general setup and navigation options, layout configurations, responsive settings, to URL and interaction options, we’ve got it all covered! :dart:

  1. General - Basic setup including content source and items per stage.:brick:

  2. Navigation - Navigation elements, start positions, and movement interactivity.:compass:

  3. Slideshow - Loop, autoplay, transition and rewind settings.:roller_coaster:

  4. Layout - Layout fine-tuning, from Stage Padding, Item Margin to Right to Left.:triangular_ruler:

  5. Responsive - Breakpoints and items displayed per breakpoint.:iphone:

  6. Image Options - Alt text and lazy loading for improved performance.:racing_car:

  7. URL - Use # to navigate between items .:link:

  8. Interactions - Personalize user interactions from pausing, dragging to mouse wheel scroll.:raised_hand:

  9. Assign Data - Data source for Carousel Images.:bookmark:
    These properties are specific to the Images Carousels and allow you to define the data type and set list of things. You can use these data in two ways, it is possible to choose an image field from the data type and use images as data source of carousel, or (and) you can use the list of items as Custom State, in other words, you access correspond data item for each image. For example, when user click on 3rd image in the carousel, you can access the 3rd item of your list of data.

Events & Interactions :tada:

Our plugin enables specific events like ‘Item drag end’, ‘Item drag start’, ‘Any Change’, ‘Translation end’, and ‘Item Clicked’. Each event allows you to create a dynamic, interactive carousel that responds to user actions and can interact with other elements of your web application. :firecracker:

Carousel-X Element’s States :balloon:

Element states include ‘Index of Current Item’, ‘Event Type’, ‘Number of Items’, ‘Total Pages’, ‘Current Page’, ‘Items per Page’, and ‘Index of Clicked Item’. These states help you monitor and control the carousel’s behavior, tailoring the carousel’s behavior to your application’s specific needs. :star2:

In a nutshell, Carousel X is your one-stop-shop for adding a touch of style and sophistication to your web applications, and it’s only $5. It’s like finding a five-dollar bill in an old coat pocket and using it to buy a carousel! :carousel_horse:

The Carousel X team can’t wait to see all the amazing things you’ll create. So hop on, the world is your carousel! :earth_africa::smiley:

See you on the ride! :carousel_horse::wave:

5 Likes
2

#announcements:new-features

:bell: Update ( version 2.2.0)

We’re thrilled to announce the latest update to our Carousel X plugin for Bubble! Our mission to make your app’s carousels more dynamic and enchanting continues with these brand-new features:

:framed_picture: Carousel Image Updates:

  • Image Rendering Options: Choose how images render - Fill, Cover, or Container!
  • Enhanced Dots Navigation: Style dots in normal and active(hover) modes. Customize size, position, radius, color, and even set animation duration!

:arrows_counterclockwise: Carousel Elements Upgrades:

  • Auto Height Adjustment: Requested by you, our users! This feature allows the carousel height to fit the displayed item. Activate it only if you need it - it’s here to provide even more flexibility!

Whether you’re designing a product showcase, a portfolio, or simply want to add flair to your app, these new features will make your carousels more powerful and visually stunning. Update to the latest version of Carousel X today and elevate your app’s aesthetic!

1 Like
3

Veey cool @NoCodeDataArtisan . Love your plugins.
Keep them coming :clap:

2 Likes
4

Hey @rpetribu

Thank you for your kind words!
We’re thrilled to hear that you love our plugins.

Your support means a lot to us, and we’ll definitely keep them coming.

Stay tuned for more exciting updates!

Mehrdad
NoCode Data Artisan

5

Hey there, you’ve got some great plugins. So polished. I hope bubble features more developers like you.

I was wondering if there is a way to control the speed of the carousel when swiping. My normal finger swipe speed is faster than the carousel when I let go. Or in other words I wonder if the swipe could catch my acceleration and slow down from that speed?

1 Like
6

Hey @facundo1,

Wow, thanks for the awesome feedback on our plugins! It’s super cool to hear that you’re enjoying them. :star_struck:

Now, about that carousel swipe speed issue, I think I get what you’re saying, but I could use a bit more info to really nail it down. Are you looking for the carousel to kind of “catch” your swipe and slow down in a more natural way? If you could give me a little more detail or an example, that would be great.

Thanks again for reaching out, and I’m looking forward to hearing back from you. We’ll get this sorted!

Cheers,

7

Wow just realized you had controls for speed and transition. Honestly, just assumed those even wouldn’t be changeable. I set my speed to 400 and transition to ease. Works just like I hoped!
Which is probably better than a dynamic speed that catches the acceleration of my drag. :sweat_smile:

Thanks for your quick response! Will be using your plug-in in 2 apps. :blush:

1 Like
8

Hey @facundo1

So glad that the speed and transition options, are working just as you wanted!
Your feedback really means a lot, and knowing that you’ll be using the plugin in 2 apps is fantastic news. :cowboy_hat_face:

Thanks a ton for taking the time to leave a review! It made us very happy :star_struck:

Don’t hesitate to reach out if you have any more questions or suggestions.

9

Looks great. Just bought it. But can’t find any documentation on how you intended it to be set-up. I can probably figure it out through an hour or two of looking at your bubble editor and trial-and-error, but a short quick-start set of instructions explaining the minimum a buyer must do to get a carousel up and running “properly” (without introducing quirks) would be appreciated and a huge time-saver (which was the point of purchasing in the first place!). Thanks.

1 Like
10

Hello @stomper-steed-0r,

First and foremost, thank you for purchasing Carousel X and for taking the time to share your feedback. This is very valuable to us because it helps us understand what we should focus on. :raised_hands:

I genuinely apologize for the oversight regarding the documentation. Your point is entirely valid – having a quick-start guide would be immensely helpful, and it’s our goal to make the set up of Carousel X as seamless as possible for our users.

I will try to quickly to publish easy-to-understand guide to you and others who might be facing the same challenge. In the interim, if you have any specific questions or encounter any roadblocks, please don’t hesitate to reach out. Our main priority is to support and assist you.

If needed, we can set it up for you quickly.

Your feedback is invaluable in helping us improve. Once again, I apologize for this and thank you for letting us know, and I really appreciate your patience and understanding.

Warm regards,
Mehrdad

11

:owl: Tutorial :green_square: :white_large_square: :white_large_square:

Image Carousel: Setup and Options

00:00 - Introduction
00:15 - Setting up your first Carousel
01:27 - Advanced Customization Options
03:25 - Real-world Applications
05:25 - Tabs as Navigation (# URL)
08:56 - More Styling and Use of Conditions

3 Likes
12

Hai @NoCodeDataArtisan
Before I buy the plugin can you help me to confirm?

  • My goal of the plugin is to create a carousel image ( client logo portfolio ) WITH a link (URL) in each image where when the user clicks the image it will go to other pages/views. ( my page is SPA )
  • it is possible to use URL from slug

Its really nice if you could help create the tutorial to add a link to the image and the workflow
Thank

1 Like
13

Hey @fogsgeneral
Absolutely, I can help you with that!

You can indeed achieve your goal of creating a carousel image with links attached to each image, in multiple ways:

  1. Using the Carousel Element

    • First, you can utilize the “Carousel Element” to transform your repeating group into a carousel. In this method, you are not limited; you can set or display anything according to your preference on the RG cells.
    • You can easily attach links from slugs or any other source to the RG cells that are items of the carousel.

  2. Utilizing the Carousel Image Element with Database Entries

    • If your images and the corresponding links are stored in your database, you can opt to use the “Carousel Image Element.”
    • Here, you’d specify the data type (similar to what is done for repeating groups) and define the image field.
    • The source of the carousel would be the entries from your database, thereby allowing you to input Bubble things instead of just images.
    • To add links to these images, you can leverage the plugin’s event (Item Clicked) to initiate an action when a user clicks an image. You’d then access the data item clicked via the element’s state to navigate to the specified URL.

  3. Using Arbitrary Values for Static Images and Links

    • If the links and images are static, meaning they don’t change over time, you can use arbitrary values to define them.
    • This method is more manual and less common. But if this method is suitable, we will explain it to you in detail.

Feel free to reach out if you encounter any issues while implementing this; I am here to assist you at any stage of your process. Let me know how it goes or if you have any further questions.

Best,
Mehrdad

17

I have bought the plugin but I cannot understand how to use the elements carousel. I am trying to build a carousel so that I can swipe for different views on my mobile site (rather than click navigation). How is this possible with groups?

18

The plugin Carousel X - Elements Slider / element :carousel_horse: Carousel Elements threw the following error: TypeError: Cannot read properties of undefined (reading ‘bubble_data’)
at eval (PLUGIN_1679928642759x492611036514353150/Carousel-X—Elements-Slider-update-----Carousel-Elements-.js:3:8929)
at https://aisp-43882.bubbleapps.io/package/run_debug_js/d38be7f38cccda7c2eab80d8576ce1c43d5f888c199a988221441c3f4677b204/xfalse/x27/run_debug.js:530:673 (please report this to the plugin author)

19

Hi @jamesh95
Sorry to hear that you had some trouble with our plugin.

Could you please elaborate on what you were trying to do with some screenshots of the plugin settings?

You can also share your app editor with me if you want me to take a closer look and help you out.

I hope to hear from you soon and solve this issue.

20

I cannot give screenshots until later/tomorrow but maybe you can advise how to proceed and if what I am trying to do is possible?
I have one group (Group A) with multiple groups within it (Groups 1…5). These are not repeating groups and they vary in height. They have unique content which is mainly text and charts. I want to be able to cycle through these groups (Groups 1…5) in a carousel.
Is that possible with your product? I could not decipher this from the video.

1 Like
21

Thanks for the further explanation.

Yes, you can easily do this.

For group A, specify an ID and enter it in the carousel element.
The plug-in element must be outside the group A and put only those five groups in the group A.

This is enough for initial setup and other settings can be changed according to your needs.

22

Thank you for your prompt responses. May I also ask if it is then possible to bind this to some kind of floating navigation, say in another carousel?
For example, as one carousel moves the floating navigation carousel moves?

23

Sure, you can use the events of the primary carousel that will triggered based on its behavior like Translated that triggered by changing sildes.

Then use the second carousel action in that event to navigate it.