Trying to build a custom slider that will have an image on left and text on the right for each card

Helpdesk Website Builder
1

Screenshot 2025-06-24 at 15.59.01
Screenshot 2025-06-24 at 15.59.011136×242 34.6 KB

Hello,

I am trying to build this custom slider but running into issues with how to approach it. It needs to shows cards overflowing and user should be able to click on the arrow and slide through the cards. In future, the client should be able to add more podcast cards to the container. Here is what I tried so far..

Added 2 column preset.
Under Style:
2 column layout → increased to 6 columns and checked Fill space
Element → set the overflow to horizontal and flex direction to row, and no wrap

If I add more cards to the container, it will try to fit within the container space instead of overflowing to the right. I need each card to take full width (I have set the fixed width for each card)

what am I missing?

Second question is how do I add the sliding part to the 2 column preset?

Any help is appreciated.

Thanks in advance.

2

Hey Sowmyabhimakumar, welcome to the community! :waving_hand:

I’ve built something similar in Sitejet before — sounds like you’re almost there!

To get the slider working:

  • Make sure your container is set to flex row and overflow-x set to scroll.
  • For the cards, remove “Fill space” and give them a fixed width so they don’t squeeze.
  • Then just add left/right arrows outside the container and use a little custom JS to scroll when clicked.

For the 2-column preset: that layout isn’t made for scrolling. Try using a flexbox layout instead — it gives you way more control for sliders.

Hope that helps! Let me know how it goes :blush:

3

Thanks so much! Using a container like you mentioned instead of preset fixed the issue.

1 Like