# Trying to build a custom slider that will have an image on left and text on the right for each card **URL:** \ **Category:** Website Builder\ **Tags:** cms\_presets\ **Created:** [June 25, 2025, 12:14am UTC](https://community.sitejet.io/t/trying-to-build-a-custom-slider-that-will-have-an-image-on-left-and-text-on-the-right-for-each-card/4909 "2025-06-25T00:14:03Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![Sowmyabhimakumar](https://avatars.discourse-cdn.com/v4/letter/s/e95f7d/32.png) [@Sowmyabhimakumar](https://community.sitejet.io/u/Sowmyabhimakumar)\ **Post date:** [June 25, 2025, 12:14am UTC](https://community.sitejet.io/t/trying-to-build-a-custom-slider-that-will-have-an-image-on-left-and-text-on-the-right-for-each-card/4909/1 "2025-06-25T00:14:03Z")
![Screenshot 2025-06-24 at 15.59.01](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/6/6f86420299aa25e9a0c82e8a5904a91b7db861e7.png) 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. ---
**Author:** ![Kalisperakichris](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/kalisperakichris/32/3572_2.png) [@Kalisperakichris](https://community.sitejet.io/u/Kalisperakichris)\ **Post date:** [June 25, 2025, 7:42am UTC](https://community.sitejet.io/t/trying-to-build-a-custom-slider-that-will-have-an-image-on-left-and-text-on-the-right-for-each-card/4909/2 "2025-06-25T07:42:21Z")
Hey Sowmyabhimakumar, welcome to the community! 👋 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 😊 ---
**Author:** ![Sowmyabhimakumar](https://avatars.discourse-cdn.com/v4/letter/s/e95f7d/32.png) [@Sowmyabhimakumar](https://community.sitejet.io/u/Sowmyabhimakumar)\ **Post date:** [June 27, 2025, 2:04am UTC](https://community.sitejet.io/t/trying-to-build-a-custom-slider-that-will-have-an-image-on-left-and-text-on-the-right-for-each-card/4909/3 "2025-06-27T02:04:06Z")
Thanks so much! Using a container like you mentioned instead of preset fixed the issue. ---
**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\ **Post date:** [July 3, 2025, 9:31am UTC](https://community.sitejet.io/t/trying-to-build-a-custom-slider-that-will-have-an-image-on-left-and-text-on-the-right-for-each-card/4909/4 "2025-07-03T09:31:04Z")