I am a beginner working in the IT department, and I’m creating an employee profile site. I want to take photos of employees and display them in a 3D carousel slider. The final design should look like the 4th example in the URL(https://kodocode.net/design-css-carousel/) you mentioned (a rotating 3D view). It seems that the standard carousel element cannot achieve this, so I believe CSS(I have CSS code from the URL) will be required. I’ve spent quite some time trying, but I couldn’t make it work. Could you please guide me? (from Japan)
Hello @Yuya Shimoyama,
I honestly tried my best on this one. Even with help from Chat GPT and Google Gemini, the implementation turned out to be quite challenging. The core idea is that you need to map all elements in Service Studio exactly as they appear in the featured code snippet. For example, the HTML elements in the snippet use tags, which correspond to containers in Service Studio. This ensures that the generated stylesheets after publishing match the intended layout.
For the JavaScript, it must be initialized in the OnReady event, since it relies on attaching events to DOM elements. Initializing it too early will trigger errors because the elements don’t exist in the DOM yet.
Additionally, the original JS code in the featured snippet used jQuery, but I translated it to vanilla JavaScript. This simplifies things by removing the need to load jQuery libraries and handle their initialization, making the solution lighter and easier to maintain.
Even if it doesn’t help 100%, I’m confident it can serve as a useful reference.
Hope this helps in some way.
Dear Sherif El-Habibi san
Thank you for your reply, and as you told me I used Container（2 containers） and it worked well! thank you!
Container (Style Class)
　　〉Container（Style Class）
　　　　〉Image（Style Class）
Thank you! I appreciate it!
You’re very welcome.