How to build an Image carousel in Glide?

Introduction

In the past I wrote a couple of posts on Glide, a powerful No Code tool. How to perform multiple actions on form submit,how to integrate with a location platform like Radar to name a few. I thought of keeping it light and simple this time. So, let's just build some fun stuff ⛱

Image Carousel can be an interesting and an essential feature in many web apps. A photo app, a real estate app, and of course needless to say, e-commerce apps.

Building such a carousel is super simple in Glide, shall we see how?

What are we building now?

My strong belief is that we learn a concept best by trying it out, by building something where in we apply a concept, rather than mindlessly watching and reading tutorials. So to keep things fun, let's build a super simple "Favorites" app. It's just a place to capture a couple of your favorite things, things in the form of pictures.

Let's build

Since it's quite straight forward I shall list down the steps required:

1. Sign in to your Glide account

2. Click on New app

3. Give it a name "My Favorites" and choose Large screen

4. On next, choose Glide tables and click on Create app

5. It takes you to the app building area (Data, Layout and Actions tab)

6. By default, there are 3 tables Contacts, Companies and Users. I just retain Users and delete the other two

7. Create a new table Favorites and add the following columns:

   1. Name : Choose Basic - text

   2. Favorite 1: Choose Basic - image

   3. Favorite 2: Choose Basic - image

   4. Favorite 3: Choose Basic - image

   5. Favorite 4: Choose Basic - image

   6. Favorite 5: Choose Basic - image

   7. Now for the carousel part 🎠, Add a column and name it "All my favorites": Choose Computed - Make Array and add all the above added Favorite columns. This is how it looks 👇

   8. 

1. We are done with the data section. Let's move on to the Layout section.

2. On the Navigation panel which is on the top left, click on + to add a new menu item

3. Choose Screen from data and select the newly created Favorites table

4. By default, a Collection is added under Components panel

5. I added a row in the data panel manually so that I'll be able to visualize

6. Let's now beautify it by adding few headings and some relevant text

7. On right side, you should see 3 tabs General, Options and Actions

8. Under General tab, there are place holders for Items Data. I mapped the column Name against Name label. Against Description, I gave a text "Click to see my top 5 favorites!"

9. Clicking on the card takes to the detail page. I just added an Image item under Content and mapped it to "All my favorites"

10. Voila! The carousel is there already, how simple can that be!

11. This is how the details screen looks like 👇

12. 

    Make sure you add placeholders in the Edit screen corresponding to all fields in our Favorites table.

13. Likewise with the Add screen. I just renamed the button label to Add my favorites

14. Go ahead and publish the app, which is what I did and here is the link. Have fun adding your favorites too!

Conclusion

No Code tools in general aid in quick development of applications, especially if they are quite straight forward. Glide is one such No Code tool. In my opinion the beauty of Glide lies in it's simplicity. Small features like what we saw in this post saves so much time when we actually build a real world app. Glide has many such features that are so easy to implement but adds a lot of value to business.

We'll look at one such simple to implement but super powerful feature in a future post.

Stay tuned!

Don't forget to add your favorites 😁 here !

References

https://www.glideapps.com/docs/make-array