Issues swiping image carousel on a desktop

Hi!
I followed the instructions for creating an image carousel by creating 5 columns with the title Image 1, Image 2, Image 3…etc. These columns were then merged into 1 column called Image. However, when I use the image component to display the image column I’m only shown 1 image. I have no idea how to view the other 4 images.

Screenshot 2021-04-14 at 16.07.01

Please help! What am I missing?

Is the image component pointing to the combined image array column, or to one of the individual image columns? If you are using the combined array column, you should be able to swipe through all of the images.

It’s pointing to the combined array column and I can see the image indication for 2 seconds when I reload the image componant and it shows 1/5.

ok, then on a phone or a computer with a touch screen, you can swipe through all of the images. If you don’t have a touch screen then you should be able to click and drag to “swipe” through the images.

I can see there are more images if I drag the first image really slowly and carefully but it creates a copy of the current image as a componant once I let go of my mouse or move my mouse too quickly.

Not sure if it’s a bug or I’m suppose to drag it in a specific way.

I think it will be fine onces I try the app in preview mode rather than the edit mode. Can I view the app in preview mode without publishing it?

The carousel feature is designed for a touch interface, but it seems odd that it’s duplicating the component when you do that. I’d be interested to see a video of that happening.

You can always publish the app at any time and still work on it. If by preview mode, you mean the Play/Select buttons at the bottom right, you can switch between those at any time.

image

There is also a live preview feature in staging that I don’t believe has been released yet, which would be more of a live preview without publishing the app.

Hi Jeff :slight_smile:

How do I upload a video for you to see? The upload option here only allows images.

I’ve also realised I was already in play mode. I guess the preview feature I was talking about is similar to what you’ve mentioned that’s currently in staging. Would be good to be able to preview the app outside of the editor before publishing it.

A lot of people will use Loom https://www.loom.com/ to create videos and share the link in the forum.

Again, you can always publish your app at any time and then you can test on any device outside of the editor.

Thank you. Here’s the video showing what happens when I try to drag the image.

Unfortunately, my screen recording doesn’t show when the image duplicates at the time of dragging but it happens whenever you see the blue line appear. It’s like when you drag an image to an uploader and a small transparent version of it appears when you hold and drag the image. Not sure if I’m making sense…

I published my app to test it but for some reaons the swiping feature is still a little difficult to use on a desktop.

It works fine on my phone and I’m assuming it will work ok on a tablet, however, I do need it to work on a desktop too.

1 Like

OK. Never seen that before. I think what’s happening is Glide is thinking that you are dragging an image from an outside source into your app, so it’s adding that image as as a new component automatically for you. A feature I guess in some respects. My laptop has a touch screen, so I tend to just swipe with my finger whenever I’m testing a carousel or the swipe cards. So I don’t usually notice any of the issues that people have trying to do the same thing with a mouse.

If your app is going to be used on a desktop as well, I might rethink how you display images in your app. Any actions that are touch specific are really hard to do with a mouse. I can’t think of a good alternative without a lot of work, but you could always try to put your images in rows instead of columns and display them as a list of tiles or cards with a vertical or horizontal orientation. May or may not work better.

Since Glide is starting to build more and more with tablets and desktops in mind, maybe down the road they will have a better way to use a carousel on a desktop with clickable left and right buttons.

3 Likes

Unfortunately, I don’t think using rows instead of columns would work as I need each image per user and each user is stored on a row. At least the user can use a tablet or their phone but I agree the left and right button would be the ideal solution for me.

Thanks for responding. Really happy with the experience of the community so far having only joined a few days ago.

1 Like

You can still have a user per row in a user table and a picture table that would have a picture per row with the image in one column and the user email in another column. Then you would just use a relation column to link the user sheet to the picture sheet and use the relation as the source for an inline list. The options are limitless, but it’s all in how you want your app to work.

I see what you mean now. Will try it and update this thread.

Thanks again!

1 Like

I decided to stick with the current set-up I have and see what the user feedback will be. They can use a tablet or a phone so we’ll see if it’s such a big deal to them.

I did notice however that the swiping motion doesn’t work for the calendar on a phone but it works on a desktop. On a desktop, I can swipe across the dates to see the next weeks dates but on a phone, I have to click on the large date at the top of the screen which opens up a pop-up calendar that then allows me to select the week I want to view. Strange…