# How do I create a horizontal scroll carousel?

**URL:** <https://community.weweb.io/t/how-do-i-create-a-horizontal-scroll-carousel/5407>\
**Category:** How do I?\
**Tags:** design\
**Created:** [November 15, 2023, 3:14am UTC](https://community.weweb.io/t/how-do-i-create-a-horizontal-scroll-carousel/5407 "2023-11-15T03:14:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![marketplacebuilder](https://avatars.discourse-cdn.com/v4/letter/m/848f3c/32.png) [@marketplacebuilder](https://community.weweb.io/u/marketplacebuilder)\
**Post date:** [November 15, 2023, 3:14am UTC](https://community.weweb.io/t/how-do-i-create-a-horizontal-scroll-carousel/5407/1 "2023-11-15T03:14:08Z")

</div>

Hopefully this is my last question for a while!

I had another question on how to achieve an elegant horizontal scroll (with custom scroll bar) if my web app is reading from a list of events to be displayed as grids on a single scrollable row.

For example, I have this messy mockup:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/24025fa8ee75b42dbffb4add04f4c61232c2519b.png)

But I want to achieve the below from DoorDash as an example:

![ezgif.com-video-to-gif](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1d278dc94240dd5f009d4865c856f6730170180a.gif)

Thank you for all your time and help!

---

<div class="post-metadata">

**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\
**Post date:** [November 15, 2023, 6:59am UTC](https://community.weweb.io/t/how-do-i-create-a-horizontal-scroll-carousel/5407/2 "2023-11-15T06:59:09Z")

</div>

Use the content slider element. 🙂