Design Cart Sand Slider – Sand Particle Image Transitions for WordPress

✨ Transform ordinary image sliders into captivating visual experiences.

Design Cart Sand Slider is a WordPress plugin that brings a distinctive sand particle transition effect to image galleries and presentations. Instead of traditional fading or sliding animations, images gradually dissolve into thousands of tiny particles, revealing the next slide in a visually engaging way.

Powered by Three.js and WebGL , the plugin allows you to create animated image sliders without writing JavaScript or modifying your WordPress theme.

Whether you're building a creative portfolio, photography website, product showcase, or landing page, Sand Slider offers an alternative to conventional image carousels.

🌐 Official Project Page – Features, Documentation & Download

👨‍💻 Meet the Developer – Paweł Nosko

✨ Key Features

• Sand Particle Transitions – Images dissolve into small particles, creating an animated sand dispersion effect.

• Three.js & WebGL – Browser-rendered animations without pre-rendered video files.

• Unlimited Sliders – Create multiple independent sliders with separate configurations.

• Flexible Slide Management – Add, remove, and reorder slides using drag-and-drop controls.

• Headings & Subheadings – Add individual text content to each slide.

• Call-to-Action Buttons – Configure button labels, URLs, and link targets.

• Adjustable Animation Settings – Customize particle density, transition timing, and slide display duration.

• Autoplay & Looping – Control automatic playback and continuous slide sequences.

• Navigation Controls – Optional previous/next arrows and pagination dots.

• Appearance Customization – Adjust background colors, navigation elements, borders, and hover states.

• Flexible Image Display – Choose between cover and contain image fitting modes.

• Shortcode Integration – Embed sliders in posts, pages, and other shortcode-compatible areas.

• Demo Slider – Get started with five demonstration slides.

🎨 What Makes Sand Slider Different?

Most WordPress sliders rely on familiar transitions such as fading, horizontal movement, or zooming. While these effects are useful, they rarely become a memorable part of a website's visual identity.

Design Cart Sand Slider takes a different approach.

When a transition begins, the current image breaks apart into tiny particles that disperse across the screen, gradually exposing the next photograph.

The result resembles sand being scattered by the wind.

The effect can be adjusted to match different presentation styles, from dynamic product showcases to slower, atmospheric photography portfolios.

⚙️ Configuration Options

The plugin includes a dedicated WordPress administration interface for managing slides and controlling their appearance.

Slide Content

Each slide can include an image, heading, subheading, CTA button text, destination URL, and link target. Slides can be reordered using drag and drop.

Layout & Image Display

Configure slider height, minimum height, background color, image fitting mode, and individual image frame margins.

Particle Animation

Fine-tune the visual effect through:

• Hold Duration: Time each slide remains visible.

• Particle Grid Density: Controls the level of detail used to break the image into particles.

• Release Span: Adjusts the particle dispersion timing.

• Starting Slide: Defines the first image displayed.

• Underlay Dimming: Controls the darkness of the image revealed underneath.

• Dimming Fade Duration: Adjusts how quickly the dimming effect changes.

Playback & Navigation

Enable or disable autoplay, looping, navigation arrows, pagination dots, and underlying image dimming.

Navigation Appearance

Customize arrow colors, backgrounds, borders, hover states, pagination dots, and active indicators.

🚀 Installation

1. Download the plugin ZIP package.

2. Open your WordPress administration dashboard.

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

4. Select the ZIP package and install it.

5. Activate Design Cart Sand Slider.

6. Open the Sand Slider section in the WordPress dashboard.

The plugin includes an example slider with five demonstration slides to help you explore the available animation settings.

📌 Shortcode Usage

Once your slider has been created, copy its shortcode and insert it into a WordPress page or post.

  
    [dc_sand_slider id="123"]
  

Replace 123 with your slider ID.

An alternative shortcode is also supported:

  
    [design-cart-sandslider id="123"]
  

Each slider maintains its own slides, animation settings, and appearance configuration.

💡 Use Cases

Design Cart Sand Slider can be used for:

• Creative Portfolios: Showcase artwork, photography, and design projects.

• Agency Websites: Create memorable visual presentations.

• Product Showcases: Highlight collections and selected products.

• Landing Pages: Add animated hero sections with calls to action.

• Photography Websites: Present photographs with distinctive transitions.

• Corporate Websites: Add motion and visual character to selected sections.

⚡ Performance Considerations

Sand Slider uses WebGL-based rendering through Three.js. Particle animation performance depends on the user's device, image dimensions, and configured particle density.

For the best experience, use appropriately optimized images, adjust grid density when necessary, and test your slider on desktop and mobile devices.

🔧 Requirements

• WordPress 6.2 or newer

• PHP 7.4 or newer

• A browser supporting WebGL

📄 License

Design Cart Sand Slider is released under the GPLv2 or later license.

👨‍💻 Author

Paweł Nosko – Design Cart

Developed by Paweł Nosko , founder and developer at Design Cart , specializing in WordPress plugins, e-commerce extensions, and custom web development.

For additional information, installation instructions, and project updates, visit the official Design Cart Sand Slider project page .

⭐ If you find Design Cart Sand Slider useful, consider starring this repository!