🎠 Design Cart 3D Carousel

Interactive Three.js Image Carousel for WordPress

Turn ordinary image galleries into immersive, interactive 3D experiences.

Design Cart 3D Carousel is a free, open-source WordPress plugin that transforms your photographs into rotating, multi-layered 3D rings using Three.js and WebGL.

Unlike traditional sliders, images are positioned in a real three-dimensional scene, allowing visitors to explore rotating photo rings, change perspectives, interact with animations, and experience atmospheric shader-based fog.

Designed for creative portfolios, photography websites, product showcases, architecture galleries, and projects that deserve something beyond an ordinary image slider.

🔗 Official Project Page & Documentation

👨‍💻 About the Developer – Paweł Nosko, Design Cart

💡 Why I Built This Plugin

The idea started with a client who asked me to create something truly unique for her website.

She didn't want another conventional image slider or a standard photo gallery.

She wanted something different. Something visitors would notice and remember.

Instead of adapting an existing carousel, I decided to experiment with a real 3D environment.

The concept was simple: what if photographs could be arranged around multiple rotating rings, suspended in a three-dimensional space?

What if visitors could interact with the camera, rotate the gallery, navigate between layers, and explore images surrounded by animated fog?

That experiment eventually became Design Cart 3D Carousel.

Initially created for a custom website project, I later transformed the solution into a configurable WordPress plugin that anyone can use.

✨ Key Features

🌐 Real 3D Rendering with Three.js

Built with Three.js r128 and WebGL rather than relying solely on traditional CSS transformations.

Images are arranged in a three-dimensional scene with perspective, camera positioning, and animated movement.

🎠 Multi-Layer Rotating Image Rings

Create impressive spatial galleries with configurable geometry.

• 1–12 image rings

• 3–60 image positions per ring

• Adjustable image dimensions and aspect ratios

• Custom spacing between images and layers

• Automatic or manually configured ring diameter

🎥 Interactive Camera Controls

Customize how visitors explore the scene.

• Camera zoom and height

• Mouse-wheel interaction

• Adjustable scroll sensitivity

• Smooth movement transitions

• Automatic layer positioning

• Configurable motion smoothing

▶️ Autoplay & Navigation

Control how the carousel behaves.

• Automatic rotation

• Adjustable rotation speed

• Pause autoplay on hover

• Optional snapping to the nearest image

• Previous and next navigation buttons

• Click-to-zoom image preview

• Configurable popup delay

🌫️ Animated Shader Fog

Create an atmospheric visual environment with customizable fog effects.

• Two independent fog colors

• Adjustable fog intensity

• Configurable animation speed

• Custom background color

• Optional transparent background

Perfect for dark, cinematic galleries, creative portfolios, and futuristic product presentations.

🖼️ Image Management

Upload and organize images directly from the WordPress administration panel.

• Multiple image uploads

• Drag-and-drop sorting

• Image thumbnails

• Custom ALT text

• Individual image removal

• Separate upload directories for each carousel

Supported image formats include JPG, PNG, GIF, WebP, and AVIF.

🎨 Extensive Configuration

Fine-tune carousel geometry, camera behavior, animation, colors, rendering quality, and navigation without writing custom JavaScript.

📋 Multiple Independent Carousels

Create, edit, duplicate, and delete carousels from the WordPress dashboard.

Each carousel has its own images, appearance, and configuration.

🚀 Installation

1. Download the Design Cart 3D Carousel ZIP package.

2. Open your WordPress administration panel.

3. Navigate to Plugins → Add New Plugin → Upload Plugin.

4. Install and activate the plugin.

5. Open 3D Carousel in the administration menu.

6. Create a new carousel.

7. Upload your images.

8. Customize the scene and animation.

9. Copy the generated shortcode to your page.

🔗 Shortcode Integration

Embed your carousel in any WordPress content area that supports shortcodes.

[dc_3d_carousel id="123"]

Replace 123 with your carousel ID.

Alternative shortcode names are also supported:

[dc-3d-carousel id="123"]
[design-cart-3d-carousel id="123"]

The plugin supports multiple separately configured carousels.

⚙️ Configuration Overview

Dimensions & Layout

Camera & Motion

Interactive Controls

Colors & Atmospheric Effects

🎯 Use Cases

Photography Portfolios

Present artistic, fashion, commercial, or editorial photography in an immersive 3D gallery.

Product Showcases

Create memorable presentations of fashion collections, accessories, decorative objects, and other visually distinctive products.

Architecture & Interior Design

Display projects, architectural visualizations, and completed interiors in a unique spatial arrangement.

Creative Agencies

Build distinctive visual sections for agency websites and promotional landing pages.

Art Exhibitions

Create interactive online presentations inspired by immersive galleries and digital art installations.

Brand Storytelling

Use animated images to create visually engaging brand experiences.

⚡ Performance Considerations

Design Cart 3D Carousel uses real-time WebGL rendering.

For the best experience:

• Optimize and compress images before uploading.

• Use appropriate image dimensions.

• Avoid unnecessarily large galleries.

• Adjust the maximum pixel ratio for performance.

• Test complex scenes on mobile devices.

• Balance animation effects with usability.

Performance depends on the number of images, scene complexity, browser support, and the visitor's device.

📋 Requirements

• WordPress 6.2 or newer

• PHP 7.4 or newer

• Browser with WebGL support

Three.js is included with the plugin.

👨‍💻 About the Developer

Design Cart 3D Carousel was created by Paweł Nosko, founder of Design Cart.

The plugin began as a custom solution for a client who wanted something different from conventional website galleries.

After developing the original 3D effect, I expanded it into a reusable WordPress plugin with extensive configuration options.

I believe some of the most interesting development ideas come directly from real client needs.

🌐 Official Project Page – Design Cart 3D Carousel

👨‍💻 Paweł Nosko – Developer & Founder of Design Cart

📄 License

GPLv2 or later.

Free and open-source software for WordPress.

🎠 Design Cart 3D Carousel — Because sometimes an ordinary slider simply isn't enough.