WP Manifestindependent plugin directory
manifest / media / haziq-3d-slider

Haziq 3D Slider

A modern, GPU-accelerated 3D card slider with a full admin panel. Add via shortcode [haziq_3d_slider] or [haziq_3d_slider id="X"].

by Haziq · github.com/haziqfaruqi/haziq-3d-slider · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/haziqfaruqi/haziq-3d-slider/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/haziqfaruqi/haziq-3d-slider ↗

Haziq 3D Slider — WordPress Plugin

A modern, GPU-accelerated 3D card slider with full WordPress admin panel.

Installation

  1. Upload the haziq-3d-slider folder to /wp-content/plugins/
  2. Activate via Plugins → Installed Plugins
  3. Go to 3D Slides in your WP admin sidebar
  4. Add slides (title, featured image, subtitle, badge, CTA)
  5. Drop [haziq_3d_slider] into any page or post

Shortcode Options

Attribute Default Description
count -1 (all) Number of slides to show
autoplay 0 (off) Seconds between auto-advance
orderby menu_order menu_order, date, rand

Examples:

[haziq_3d_slider]
[haziq_3d_slider count="4" autoplay="5"]
[haziq_3d_slider orderby="rand"]

Slide Fields

Field Where to set
Title Post title
Caption Post content (editor)
Background image Featured image
Subtitle/eyebrow Slide Options meta box
Badge label Slide Options meta box
Badge color Slide Options meta box (color pick)
CTA Button label Slide Options meta box
CTA Button URL Slide Options meta box
Slide order Page Attributes → Order

Global Settings

Go to 3D Slides → Settings to configure:

  • Autoplay — global default autoplay speed
  • Transition style — Rotate Y, Flip X, Cube, Tilt
  • Navigation — toggle arrows and dot indicators
  • Card height — in pixels
  • Accent color — used for badges, CTA, dots
  • Overlay opacity — how dark the image overlay is

Transition Styles

Value Effect
rotate Classic 3D rotate on Y axis
flip Card flip on X axis
cube Cube-style rotation
tilt Perspective tilt with depth

JavaScript API

Reinitialize sliders (e.g., after AJAX content load):

window.H3DSlider.init();

Initialize a specific element:

window.H3DSlider.initEl(document.querySelector('#h3ds-1234'));

Listen to slide change events:

document.querySelector('.h3ds-wrapper').addEventListener('h3ds:change', (e) => {
    console.log('Slide changed to:', e.detail.current);
});

File Structure

haziq-3d-slider/
├── haziq-3d-slider.php      ← Plugin entry point
├── readme.md
├── includes/
│   ├── cpt.php              ← Custom Post Type + meta boxes
│   ├── shortcode.php        ← [haziq_3d_slider] shortcode
│   └── enqueue.php          ← Script/style enqueuing
├── admin/
│   ├── settings.php         ← Global settings page
│   └── admin.css
├── templates/
│   └── slider.php           ← Frontend HTML output
└── assets/
    ├── slider.css           ← All 3D styles + transitions
    └── slider.js            ← Vanilla JS controller