🎞️ 1. How to Create an Auto-Play Slideshow

no, it’s the same as before

Is your container setting 1:1? The Glide divider line is very subtle, often not readable.

It’s set on “Full” but i also tried 1:1 just in case

You may look closely at my settings:

1 Like

I checked it and replicated everything to make sure our settings are identical.
Now I believe that it’s just the difference in our phones… So my image just won’t reach the edge with these settings.

I took before and after pictures to prove that the code is working.

1 Like

I’ll double-check. Trying to publish it. I’ll let you know later.

1 Like

ok

@Sekayi_Liburd, This is a code improvement that can be responsive for two views: mobile and desktop (you can temporarily disable the use of device info). Please try again.

If it still doesn’t work, try taking a screenshot of the left and right panel configurations in full so I can see them clearly.

Note: USE THE PREVIOUS CODE :point_up_2:

/*Hide Navbar*/ .phone #page-root:has(.slide-Show) [data-testid="wire-container"] { background-color: transparent !important; padding-top: 0; } /*Desktop-Repairing*/ [data-testid="wire-component-stack-slide-Show"] > div > div > div > div { margin-top: 54px; } /*Container padding*/ .mobile-layer #main-root:has(.slide-Show) .slide-Show > div > div > div > div { padding:0 !important; width: 100%; margin-top: calc(30px - var(--safe-area-inset-top)); } /*Hide Container background*/ .mobile-layer #main-root:has(.slide-Show) .slide-Show { background: transparent !important; } .mobile-layer #main-root:has(.slide-Show) [data-testid="card-image"]{ height:300px; } .mobile-layer #main-root:has(.slide-Show) [data-testid="card-image"] img, #page-root:has(.slide-Show) [data-testid="cc-card"]{ border-radius:0; }

View on iPhone

Desktop view

1 Like

It still looks like there’s padding.
Just a warning… my left panel is crazzzyyy because this is my test app that I’m fiddling in. So there are LOTS of components to wade thru :blush:

The container near the bottom is the one I’m currently looking at.

No, the container containing the collection and richtext is the header, you should place it first at the very top.

1 Like

oh ok. I put it at the very top but it didn’t change the width.

here are the images on the right:

Try changing the container background to accent.

1 Like

that did the trick!

So I guess it was a combination of placing it at the top and selecting accent

Out of curiousity, I’m gonna try the other codes you provided before as well.

1 Like

Each different setting results in a different selector. Will you keep this condition, or will you revert to “none”?

hmm… I prefer the accent than none. But I prefer a background image than the accent. So I’ll have to play around with it to see what I land on.

(All the codes work now btw :smiling_face_with_tear:)

Thanks for your saintly patience.

1 Like

I have a question for you.

Can I create a sequence of actions that also sync with the Index to Show column?
A.k.a:

When Index to Show is 1 → action 1
When Index to Show is 2 → action 2
etc.

I feel like we should be able to get the images and actions to sync up even if we don’t use a collection but I don’t really know how to build action sequences yet.
If we can use the image component or just rich text, we’ll be able to create/customize a design that we love.

You can assemble that condition in a “new action” for the collection regarding the current row/image displayed. However, if you’re using the image or richtext component, they are static and I don’t think it’s possible.

Can you explain what “static” means in this case? If we capture the moment the user taps on the image by identifying the “Index to Show” when the action is triggered, wouldn’t it resemble something live? (Similar to how our custom search works)

The relationship of these components with the table is only through one data column from the backend table. Although it can contain an array, but it does not have a direct relationship. You won’t find a relation from the option of this object.

hmm… ok. That might be why I’ve been going in circles trying to set up the actions. :sweat_smile:

1 Like