A 3D Cube slider is a striking way to showcase portfolio items, product features, or app screenshots. It mimics a rotating box where each face is a slide. This effect is fantastic for saving space while adding a high-tech feel to your design.

To solve this, use Div Render Container Slider for Elementor. Its “Cube” effect mode handles all the complex 3D math for you.

Step 1: Setting Up the Container Layout

Create a parent Container. Inside, add your child Containers. For a Cube effect, it is best if the slider container itself is roughly square, or at least consistent in aspect ratio with the content.

Add your content to each child Container. This works great for single images or simple “Icon + Text” blocks.

Step 2: Activating Slider Mode

Select the parent Container and enable Slider Mode in the Layout tab.

Step 3: Configuring the Cube Effect

Navigate to the Slider Settings:

  • Effect: Select Cube from the dropdown menu.
  • Slides Per View: This will automatically lock to 1 because a cube rotates one face at a time.
  • Shadows: If available, ensure “Slide Shadows” is enabled. This adds a realistic shading effect during the rotation, enhancing the 3D illusion.

Pro Tips for Cube Sliders

  • Single Subject: This effect works best when showcasing different angles of a single product or a sequential story.
  • Backgrounds: Avoid transparent backgrounds on your slides, as you might see the “back” of the cube during rotation. Give each child container a solid background color or image.