KO – Project Slider for Divi 5

A native Divi 5 parent/child project slider with a full-stage background that sharpens continuously as the visitor scrolls.

Features

• Repeatable Project Slide child modules.
• One full-stage background image per slide, with no separate square foreground image.
• Scroll-scrubbed blur-to-focus behavior with a full scroll segment for every slide, including the final slide.
• Two independently animated project-title lines.
• Additional Summary Title and rich Summary Text fields.
• Native Divi font, spacing, and text-shadow controls for all four text fields.
• Parent-wide title-motion settings plus optional per-slide overrides.
• Parent Starting Blur plus a responsive per-slide Starting Blur override.
• Optional sticky scroll control, autoplay, looping, dots, keyboard controls, and touch/pointer swiping.
• Focus management, live slide announcements, off-screen pausing, and reduced-motion support.

Requirements

• WordPress 6.8 or later
• PHP 7.4 or later
• Divi 5

Module structure

KO – Project Slider
├── Project Slide
│   ├── Title Line 1
│   ├── Title Line 2
│   ├── Summary Title
│   ├── Summary Text
│   └── Background Image
├── Project Slide
└── Project Slide

Background image and focus behavior

Each Project Slide has a dedicated Background Image picker. The image is rendered on its own layer so the plugin can blur the image without blurring the project title, summary, or navigation. The remaining standard Divi module settings are still available on the parent module.

With Scroll-Controlled Slides enabled, every slide receives one scroll segment. Its background starts at the configured blur and sharpens continuously to 0px as that segment progresses. The last slide receives a complete focus segment before the sticky stage releases.

Set the shared responsive value under KO – Project Slider → Design → Background Focus → Starting Blur. Override it on any child under Project Slide → Design → Background Focus → Starting Blur Override.

The background does not pan, zoom, or use a Ken Burns effect. In autoplay or manual mode, the active image transitions from the configured blur to sharp when the slide becomes active. When reduced motion is respected, active backgrounds display sharply without the focus transition.

Text content and styling

Open a Project Slide and use:

• Content → Project Title for Title Line 1 and Title Line 2.
• Content → Summary for Summary Title and Summary Text.

Summary Text supports Divi rich text and dynamic content. Each of the four fields has its own native Divi font, spacing, and text-shadow controls in the Design tab.

Parent title-motion controls live under Design → Motion. A child slide can override duration, travel distance, line-two delay, independent line fade durations, shared title opacity, left padding, entry direction, and easing under Design → Title Motion.

Navigation modes

• Scroll enabled: a sticky page-scroll sequence controls slide selection and background focus.
• Scroll disabled + Autoplay enabled: slides advance on the configured timer and focus as they activate.
• Scroll disabled + Autoplay disabled: dots, keyboard arrows, Home/End, or swipe gestures select slides.

The initial title animation waits until the slider enters the viewport. Visual Builder changes to navigation settings reinitialize the preview without a page reload.

Image preparation

• Use a landscape image large enough to cover the full stage; roughly 2000–2600 pixels wide is a practical starting point.
• Use WebP or AVIF when available.
• Keep essential subjects clear of the title, summary, and lower-left navigation areas.
• Background images are decorative; project meaning should be present in the visible text.

Development

pnpm install --frozen-lockfile
pnpm run build
pnpm test

The installable ZIP includes only:

• assets/css/ko-project-slider-divi-5.css
• assets/js/ko-project-slider-divi-5.js
• assets/js/ko-project-slider-divi-5-builder.js
• includes/
• modules-json/
• ko-project-slider-divi-5.php
• readme.txt

Source, tests, fixtures, node_modules, and source maps are excluded.

Privacy

The plugin makes no external requests, stores no analytics, and includes no client-specific domains, IDs, imagery, or configuration. Slider content is stored in normal Divi layout data.

License

GPL-2.0-or-later.