[NEW PLUGIN] Advanced Image Slider

Hello fellow Bubblers!
We are glad to announce our small addition to the plugin collection:

Advanced Image Slider

With it you can enhance your web or mobile app by adding a beautiful slider with text and URLs.
Advanced Image Slider is a multioptional plugin that lets you easily create powerful sliders with attractive transition effects and customize each separate element to your liking.

Features:

  • Simple Captions with Url’s.
    Add text or links to your slides with minimal effort

  • Thumbnails.
    Use thumbnails for slider pagination, instead of bullets.

  • Carousel.
    Turn your slider into a carousel, showing multiple slides at once.

  • Lazy Loading for extremely fast page loading times.
    Images loads only when they are viewed

  • Fully Responsive & ready for all devices.
    The slider will look great on every device including desktops, notebooks, tablets, and smartphones.

  • Many Dot and Arrow Styles.
    Choose between different slide navigation dot and arrow styles.

Add the plugin to your app, set the image gallery and configure the properties as you see fit. Hints are included

Demo:
https://plugin-preview.bubbleapps.io/version-test/advanced_slider

Plugin page:

If you have questions, reach out to us at contact@mindforapps.com
We appreciate your reviews and suggestions.

Cheers
Jay | Mindforapps

3 Likes

@MindForApps

Hi Jay, thank you for putting this plugin together. Can you confirm if a vertical carousel can be created with this plugin? I see there is an option to make it horizontal. I can’t determine if it can function vertically as well.

Hello!
I’ll try to answer.
Yes it is possible. Please see the last (bottommost) example on this test demo page:
https://plugin-preview.bubbleapps.io/version-test/test_slider/Lorem%20ipsum…?debug_mode=true

There you can “open in the editor”.
Pay attention to the settings in these screenshots:


For a more correct display, install:
Slide Width = element width (W)
And ‘Make this element fixed-width’ = true

Good luck.

Hi @vasanbo,

Thank you for your response. I’ve tried your recommendation and there appears to be an issue when checking “Make this element fixed-width.” Otherwise, this is working perfectly. Could you look into why it’s doing that?

Could I also make a request to have an arrow orientation option? Currently, there is only an option to scroll with the vertical arrows.

Thanks!
Cole

The arrows now only have a horizontal orientation. And, unfortunately, there are no plans to change anything in the behavior of the arrows. You can use swipe or auto play, for example.

Hello everyone!

Since the creation of the “ADVANCED IMAGE SLIDER” plugin, we have repeatedly supplemented and improved the plugin. But much of this is not displayed on the forum.
Here are some of the changes and additions:

  • Auto-update - Improved the auto-update feature. If any changes occur in the database connected to the slider (slides are added, removed or changed), then these changes are automatically reflected in the slider without first reloading the slider.

  • Improved imgix section - slider dimensions are taken into account.

  • Added options:

  • slide_is_changed - fired when the slide changes

  • slide_position - shows the position of the current slide

  • link_img_position - shows the position of the clicked slide

  • Added the ability to move thumbnails below the container.

  • Added underline to the active thumbnail. And the choice to dim or not activate thumbnails.

  • Added the ability to change the distance of the underline from the thumbnail.


    .
    .

  • Added marker section (+img_marker) - setting/removing a marker on a slide with a mouse click. The state of the markers are read from and written to the database.

  • Added another text field. You can now display three independent texts on your slides.

  • Added the ability to use Google fonts as custom fonts.

  • Added the ability to overlay an arbitrary color layer on slides.

  • And many other minor improvements and fixes.

We have created an additional demo page showing some of these features. You can go to the editor and see how it’s all implemented.
.
.

advanced slider additional demo:
https://plugin-preview.bubbleapps.io/version-test/advanced_slider_addition
.

Good luck to all!

Hi @MindForApps

Great job regarding your plugin! I have a couple of questions regarding the “Image gallery” used as data:

  • Is there a way to use image URLs hosted on Bubble, instead of using image variables, as data list?
  • How could you had an ALT tag for each image for SEO purpose?
  • Is it plan to support video in the slideshow? If yes, would it be possible to use video URLs hosted on Bubble or on Youtube instead of using video variables?

The idea of using URL instead of image/video variables is to have a unique list of media to use. Moreover my media are used in several part of my website and having to upload the same media several times is not very efficient.

Thanks :slight_smile:

Hello!

  • There is no need to upload the same image several times to use it in different elements of the site.
    You can upload all the necessary images to some table in the bubble database. You can then use this image table in various parts of your site. You can extract data from the table using various conditions (using standard bubble tools).
  • So far, this feature has not been requested by users. But I think that in one of the next updates we will add it.
  • Unfortunately, we do not plan to use video content in this slider. When creating this slider, we came to the conclusion that for normal trouble-free and correct operation, the slider must be either an image slider or a video slider. That’s why we focused on images.

Thank you.
Good luck.

1 Like

Hi all!

Plugin update version 2.18.2

Added actions:
play - enable auto slide playback
pause - stop auto playback
next - move to the next slide
prev - go to the previous slide
set Autoplay - (change auto play mode)

Through the workflow, you launch these actions.

Also, a function has been added that monitors whether the slider is in the screen visibility area.

Now when an element appears on the screen when scrolling or vice versa goes beyond it, the “visibility_changed” trigger will fire

Image 109

And if the plugin is in the viewport, then the value of the parameter “iv_viewport” = true
if the plugin is outside the viewport then the value of the parameter “iv_viewport” = false

And then you can run the actions you need, including
play, pause, next, prev​​​​​​​, set Autoplay

For example play/pause autoplay when entering/leaving the viewport.


.

A small demo on our additional demo page:
https://plugin-preview.bubbleapps.io/version-test/advanced_slider_addition

could this plugin be used to allow users to swipe through images in a gallery on mobile? I want to improve the mobile experience of this app https://minnnis.com/

Worryingly, when I looked at your demo page on my desktop it loaded fine, but when I tried to check it on my Pixel 7 phone with Chrome, the page just locked at the top and I could not scroll down.

Hello!

We tested the plugin on mobile devices. It also works on Android and iOS devices. Perhaps this is some kind of conflict with the Google Pixel 7, but this is also very strange because there is a standard Aidroid. This should not depend on the phone model in any way. Maybe it was some kind of temporary glitch. It is very difficult to say what is the reason for freezing on your phone.

Can I do an image slider extremely similar to amazon for desktops & mobile?

Hello!

Each user has their own wishes and requirements for the plugin functions.
I think that in order for you to be able to decide whether this or that plugin is suitable for your purposes, you should try the plugin yourself on a live example.

We have a test application with the “Advanced Image Slider” plugin enabled. I invite you to try our plugin yourself in this test application.
I sent you a link to the editor of the test application and a small instruction in private messages.

I am sure that for you it will be the best option to decide whether the plugin is suitable for your purposes or not.

By the way, we have another plugin for the slider “Advanced Slider from RepeatingGroup” with the help of which you can also implement your task.
demo: https://plugin-preview-4.bubbleapps.io/version-test/advanced_rg_slider
plugin page: Advanced Slider from RepeatingGroup Plugin | Bubble

Test the plugin “Advanced Slider from RepeatingGroup”
For it, I also created a test application and sent you a link to it in private messages.

Good luck.

Hello @MindForApps ,
Thanks for the plugin, it works great.
I wanted to know if you have any updates on the “alt” text of the images for the SEO ?

Hello!

I’m sorry for the delay.

Update v2.18.6

Added Alt Attribute.

“ALT” text is added as a list just like “Title Text”, “Description Text” and “Description_2 Text”
Please note that when adding an alt Attribute list, the “join with ##” construct is used.

Image 1

1 Like

Hi all!

New version v3.0.0 has just been published.

The new version will stop supporting the old engine and will only support the new responsive engine.

You can check out the demo page for this version.
Here is the editor for this version of the plugin:

The main difference between version 3 and the previous ones (1 and 2) is that the plugin only works in the new responsive engine. You will also need to set the required ratio (aspect ratio) for the slider container manually. This way the slider will always follow these proportions. When changing the width, the height will change proportionally.
Image 6

You also have full control over the width and height of the slider in the layout tab.

Any chance we could get the zoom feature like Amazons when you hover over a product on desktop?

I’ve been having many issues with slider lately not formating images correctly. Doing this like this


Hello!

I think that there are problems in the settings of the parameters responsible for “imgix”

Most likely you have “Resize Fit Mode” = “clamp” enabled and using this you will achieve the effect you described.
Try setting “Resize Fit Mode” = “clip”

You can read more about some of the modes here:

I think that in your case “Resize Fit Mode” = “clip” will help