[WEB] How would I make a custom game carousel container on the discovery page?

[Batimius]

Hello there. As you may have noticed from the “WEB” highlight, this question regards the Roblox website rather than the engine itself, so it will not be about Lua but rather JavaScript and possibly HTML + CSS.

That being said, to sum the whole question up, I want to make a game carousel container on the Roblox website with custom games.

Example Game Carousel Container

I want my container to be exactly like the Roblox one and function just like the Roblox one. This container will include games, but the games it includes will be custom (they will be the same as the other ones, but different order). Now, I know that each container structure looks like this:

<div data-testid="game-carousel-games-container" class="games-list-container is-windows">
    <a herf="#/link/to/sortPage"> . . . Title Stuff . . . <\a>
    <div class="horizontal-scroller games-list">
        <div data-testid="game-carousel-carousel-container" class="clearfix horizontal-scroll-window">
            ::before
            <div class="horizontally-scrollable" style="left: 0px;">
                <ul class="hlist games game-cards game-tile-list">
                    ::before
                    <li class="list-item game-card game-tile" id="GAME_ID" title="GAME_TITLE"> . . Card Stuff . . . </li>
                    <li class="list-item game-card game-tile" id="GAME_ID" title="GAME_TITLE"> . . Card Stuff . . . </li>
                    <li class="list-item game-card game-tile" id="GAME_ID" title="GAME_TITLE"> . . Card Stuff . . . </li>
                    <li class="list-item game-card game-tile" id="GAME_ID" title="GAME_TITLE"> . . Card Stuff . . . </li>
                    ::after
                <\div>
            <\div>
            <div data-testid="game-carousel-scroll-bar" class="scroller prev" role="button" tabindex="0"> . . . Button Stuff . . .</div>
            <div data-testid="game-carousel-scroll-bar" class="scroller next" role="button" tabindex="0"> . . . Button Stuff . . .</div>
            ::after
        <\div>
    <\div>
<\div>

Now, in theory, I could copy the above format, change the title, and add my own card objects in order to make it work. Unfortunately, even if I did add my own objects, the cards seem to have a “default” value that they get reverted too. Also, when a card is not visible, the card object data gets reset, keeping only the class name (it looks like this: <li class="list-item game-card game-tile"><\li>.

Image Example of Effect

That being said, I have no idea what to do in order to make this work. Although I could use a custom carousel library such as Owl Carousel 2, it will not look or feel the same. The ideal would be if I could somehow utilize the Roblox one and instead put my cards in the game-card list.

If someone knows how I would be able to achieve this effect (or how I’d be able to modify the Roblox carousel), then that would be amazing. Thank you for your time and help, I greatly appreciate it.

[Synitx]

Right click anywhere in roblox web area, then click

Then you will get the all source

[Batimius]

Thank you for your reply, but I believe you fail to understand the question. I already have seen the source. Above, I have even listed the whole HTML structure of the carousels. The problem isn’t the HTML sort, I know how that works. The problem comes with actually implementing a custom ones. There seems to be some JS in the background that handles the entire thing and I have no idea what that is or how it works, hence why I am asking help from the community. Thank you for taking the time to reply, but I don’t see how your reply helps.

[Synitx]

So you managed to get the cards? (html and css part)
And you want to make it work with javascript?

If so, i would store all the games in a JSON file. (custom database)
I mostly use EJS that lets me get data from the backend to the front end.

(Well theres soo many frameworks that can do the same REACT and NEXTJS, but they takes alot of time to load and can be used for big projects.)

[Batimius]

Basically yeah. The CSS is applied based on the class, so that isn’t an issue. The HTML listed above (it is the only one in my topic) shows the structure of a single game carousel. The problem is that even if I add custom <li> elements (so custom game cards), the carousel will either not function or will replace them with the default ones. What I want is to have a new carousel created and have games of choice placed in there.

(Replying to the edit from the reply)

@Synitx

If so, i would store all the games in a JSON file. (custom database)
I mostly use EJS that lets me get data from the backend to the front end.

The problem isn’t storing them. I already have a list of games I want to import. The problem is the frontend integration.

[tacticallysrupid (tissues)]

im pretty sure you can find js code under sources in inspect element, have you tried looking there?? also, what is this for?? will you be implementing images + titles or is this for something else??

[Batimius]

Thank you for the reply. The code is minified and very hard to read (even after being beautified), hence why I am making this topic in the first place. I am unsure how it works exactly so that is why I have come here to ask for assistance.

[Synitx]

May I see your javascript source?
Where it gets the games data and then implements it?

and the problem is with yellow arrow ones they are supposed to set as red arrow ones?

[tacticallysrupid (tissues)]

ah, that makes sense. for stuff like this im pretty sure you’d be better off asking someone on stack overflow to help you. there’s a lot of js coders there.

[Batimius]

@Synitx

May I see your javascript source?
Where it gets the games data and then implements it?

Here is the JavaScript code that the carousel uses: https://js.rbxcdn.com/cf782f790f8c88f42464a28dee516bd4cc13ecef05f9356082c4bef9f55875b7.js

@Synitx

and the problem is with yellow arrow ones they are supposed to set as red arrow ones?

That is one problem that is caused by the code. As you scroll through the carousel, different cards become “invisible” and their data gets removed. When you scroll back to those, their data gets overwritten by the default one. My assumption is that those are just placeholders for the JavaScript script to import the items to, hence why changing it will cause it to be overwritten and why making your own one just makes the code break.

[Batimius]

I did have the idea of using StackOverflow, but that is not really an appropriate choice of platform. Since this issue is Roblox-related, it is only appropriate to use the DevForum instead. Asking someone on StackOverflow to “understand” the Roblox code is something very random and not really appropriate.

[Synitx]

So can’t you make your own javascript code instead of using roblox’s?
because roblox uses XML and its connected with backend

Heres a codepen of the card sliders with arrows

[Batimius]

I could make my own one, but I would want it to be exactly like the Roblox one. Making my own one will be a worst-case scenario for me as I would have to find a way to implement the exact same design and movement (and considering that I know very little CSS, it would be difficult). Like I stated in the topic,

@Batimius

That being said, I have no idea what to do in order to make this work. Although I could use a custom carousel library such as Owl Carousel 2, it will not look or feel the same. The ideal would be if I could somehow utilize the Roblox one and instead put my cards in the game-card list.

[Synitx]

Well you can keep the CSS and edit the JAVASCRIPT.
I’ve just noticed that the javascript you gave gets game data from the backend
So its not possible, and the javascript code is obfuscated and hard to rewrite

I would suggest you to write the code from scratch.