# Scroll bar & Products slider

**URL:** <https://community.glideapps.com/t/scroll-bar-products-slider/75409>\
**Category:** Ask for Help\
**Created:** [August 4, 2024, 2:26pm UTC](https://community.glideapps.com/t/scroll-bar-products-slider/75409 "2024-08-04T14:26:48Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![abdelfatah\_hussien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdelfatah_hussien/32/66228_2.png) [@abdelfatah\_hussien](https://community.glideapps.com/u/abdelfatah_hussien)\
**Post date:** [August 4, 2024, 2:26pm UTC](https://community.glideapps.com/t/scroll-bar-products-slider/75409/1 "2024-08-04T14:26:48Z")

</div>

I have a sales application with products I want to create  
A slider where I add products  
Like the Amazon app

Thanks

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 4, 2024, 2:32pm UTC](https://community.glideapps.com/t/scroll-bar-products-slider/75409/2 "2024-08-04T14:32:57Z")

</div>

Can you add screenshots of your example from the Amazon app?

---

<div class="post-metadata">

**Author:** ![abdelfatah\_hussien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdelfatah_hussien/32/66228_2.png) [@abdelfatah\_hussien](https://community.glideapps.com/u/abdelfatah_hussien)\
**Post date:** [August 4, 2024, 2:39pm UTC](https://community.glideapps.com/t/scroll-bar-products-slider/75409/3 "2024-08-04T14:39:42Z")

</div>

![WhatsApp Image 2024-08-04 at 4.37.22 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/6/1698eb35c3fa1fd7dbd47fc6172c15f432b466a1.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 4, 2024, 11:27pm UTC](https://community.glideapps.com/t/scroll-bar-products-slider/75409/4 "2024-08-04T23:27:43Z")

</div>

You can use a Card \> Horizontal collection to achieve that look.

---

<div class="post-metadata">

**Author:** ![abdelfatah\_hussien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdelfatah_hussien/32/66228_2.png) [@abdelfatah\_hussien](https://community.glideapps.com/u/abdelfatah_hussien)\
**Post date:** [August 5, 2024, 6:14am UTC](https://community.glideapps.com/t/scroll-bar-products-slider/75409/5 "2024-08-05T06:14:19Z")

</div>

Can it be animated with the user, and how?

thank you very much

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 5, 2024, 7:44am UTC](https://community.glideapps.com/t/scroll-bar-products-slider/75409/6 "2024-08-05T07:44:03Z")

</div>

What do you mean by “animated”? Do you mean it auto-scrolls?

---

<div class="post-metadata">

**Author:** ![abdelfatah\_hussien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdelfatah_hussien/32/66228_2.png) [@abdelfatah\_hussien](https://community.glideapps.com/u/abdelfatah_hussien)\
**Post date:** [August 5, 2024, 9:02am UTC](https://community.glideapps.com/t/scroll-bar-products-slider/75409/7 "2024-08-05T09:02:45Z")

</div>

Finger Swipe - It’s a rotating product bar

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 5, 2024, 9:03am UTC](https://community.glideapps.com/t/scroll-bar-products-slider/75409/8 "2024-08-05T09:03:43Z")

</div>

That should be possible with the card horizontal collection as stated above.

---

<div class="post-metadata">

**Author:** ![abdelfatah\_hussien](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdelfatah_hussien/32/66228_2.png) [@abdelfatah\_hussien](https://community.glideapps.com/u/abdelfatah_hussien)\
**Post date:** [August 5, 2024, 9:05am UTC](https://community.glideapps.com/t/scroll-bar-products-slider/75409/9 "2024-08-05T09:05:34Z")

</div>

How to be empowered?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [August 5, 2024, 12:30pm UTC](https://community.glideapps.com/t/scroll-bar-products-slider/75409/10 "2024-08-05T12:30:45Z")

</div>

Add a Collection component. Select the Card Style. Then select Horizontal for the Orientation.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [August 29, 2024, 9:36am UTC](https://community.glideapps.com/t/scroll-bar-products-slider/75409/11 "2024-08-29T09:36:04Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.