How to make an Image Carousel

Ask for Help
1

How can I create a rotating image Carousel on my app say for ADS?

4 Likes
2

I recently tried using a .gif file with the image component. It worked pretty well. So that may be an option.

3 Likes
3

Glide can do this. Just create a column for the number of images you want to have in the carousel in the sheet.

i.e. Name your columns “Image 1”, “Image 2”, “Image 3”
Glide will create a special column, sort of like a relation, and if you set that column as the source for an image component, it will act as a carousel. There’s a video out there somewhere. When I find it, I’ll link to it.

Found it.

3 Likes
4

Doesn’t that require the person to swipe to change the images? I want an automatic carousel… @mmgt2005 the gif idea might be the way to go

5

Hi Chris did you get your carousel working automatically, I’m looking at doing the same thing?

1 Like
6

This is just a thought, but you could create an inline list of ads in a horizontal tile layout. Then apply the randomize sort order. I don’t think you can limit the number of items in a list, so I can’t limit it to just one list item and a user could still scroll through all of the ads, but that may not be the worst thing. I don’t know what triggers the random sort order to change, but it seems to at least change whenever you reload the app.

I modified the Random/Advertising Links demo in https://concepts.glideapp.io/ to show what I’m thinking.

1 Like
7

How to make an image carousel by dragging and dropping
How to quickly make an image carousel by hosting images in the Glide Data Editor

Hi there @Krivo,

You’ve experimented quite a bit with image carousels, so you might have an idea:

  • I have about 20 images hosted on Google Drive that I want to use in a carousel.
  • I created a carousel with what I would call the “usual way” (numbered columns, etc.)
  • This works fine, but I would now like to host the images in the Glide Data Editor directly and see if this reduces lag (I noticed a slight lag when the user enters the list element).
  • Any idea how I could either (a) upload the images in bulk to the GDE, or (b) drag and drop the images repeatedly?

(When I drag and drop, the last drag-and-drop logically replaces the previous image. I have therefore been dragging and dropping the images individually, copy-pasting the new link to the numbered columns. I mentioned 20 images above, but actually I’m working with 5-20 images per row, and I have many rows. The process is quite time consuming :slight_smile: )

8

@nathanaelb

Hi,

The short answer as I see it. You cannot do a image carousel in the Data editor.
Why?
Because the data editor has some build-in functionality that combines columns when they have the same columnname plus a sequencial numbering e.g. ImagePano1, ImagePano2, ImagePano3. This will result in a combined column called ImagePano.

I tried to create a form where images can be uploaded - but you have to do it one-by-one - and no dragging images as I can see.

NB: Are you sure that the image will show quicker?

9

Every time I see “NB”, I don’t know if this refers to the Latin “Nota Bene” or to my name “Nathanael B.” :joy:

I don’t know if the images will display quicker, that is what I’m testing. I’ll let you know.

2 Likes
10

Here I expect that you can use both meanings :slight_smile:

1 Like
11

You could probably create a screen with 20 image components to handle the drag and drop. Either create it temporarily it hide it so only you can see it.

12

Hi @Jeff_Hager, I’ve figured out how to do it, it’s no biggy: I drag and drop, take the Google API link generated, move it in the column I want, rinse and repeat for every image. It works but it’s a clunky way of building the carousels.

My questions was rather: is there way of uploading images in bulk to the GDE, or a non-clunky way of dragging and dropping multiple times and fiddling around with copy-pasting?

It appears there isn’t (yet). All well :man_shrugging:

1 Like
13

I was only thinking of a secondary screen that only you can access with image components that point to each individual image column. You could bulk drag and drop into each image component directly through the separate image components without having to then move the url. It would be a direct drag, drop, and done and save you the extra step of moving urls I guess. Then everyone else would only see the images through a single image component using the array column. That’s about the best idea I have. One thing you may need to do is preload the columns with text, so the component at least shows up for you to drag and drop into it. If you have something that works, then no problem.

Also, now thinking about it more, I believe you can upload directly through the data editor. If recognized as an image column, you have the option to add an unsplash image as well as upload images. Not sure how this would work with an array column though, since you can’t see each individual column.

14

Aaah, I now understand what you meant with the secondary screen. Sneaky!

I am uploading via the Glide Data Editor, in order for the images to be hosted on Glide rather than on Google Drive. I’m testing if the carousel will then load a little faster. I’ll keep you posted.

1 Like
15

Is there a way I can keep the original columns (Ex: Image 1, Image 2, Image 3)?

A relation column is created, but I can’t access the individual columns in the data glide editor.

16

What do you want to do with each image column? Do you want to edit them in the Editor?

17

Yes, I want to upload them directly into the editor.

18
@import '//glidetools.ml/app-widgets/slideshow/1?slides=4&interval=5'

Maybe this works too, try it out. The images slide on their own
2 Likes
19

Currently I think there’s no way to access that inside the Data Editor. You would have to create image pickers for them.

1 Like
20

I changed it to A,B,C. Let’s see if it sticks.