BoldSlider

Description

BoldSlider is a lightweight, fully-responsive slider builder for WordPress with a real visual editor — drag layers on a canvas, set per-device overrides, and embed via shortcode or Gutenberg block.

Free version highlights

• Visual builder — drag, resize, rotate layers on a real canvas. Eight resize handles. Keyboard nudge + delete.
• Per-device responsive — override layer position, size, font size, color, and visibility separately for Desktop / Tablet / Mobile.
• Layer types (7 free): Heading, Paragraph, Image, Button, Shape, YouTube embed, Vimeo embed.
• Slider effects: Slide, Fade, Cube, Coverflow, Flip, Cards.
• Backgrounds: image (with cover/contain/percentage/auto fit, repeat, 9-grid + custom position), color, uploaded MP4 video.
• Background animations: Ken Burns, Zoom In, Zoom Out, Pan Left, Pan Right.
• Navigation arrows with placement (inside/outside) + position (top/middle/bottom) + size + offset + colors + hover styles.
• Pagination (bullets / fraction / progress bar) with placement, position, bullet size/gap, clickable, active + inactive colors.
• Thumbnail strip (Swiper Thumbs).
• Autoplay with delay + pause-on-hover.
• Layer animations — 8 CSS-based entrance presets (fade, fade-up/down/left/right, zoom-in/out).
• Button hover styles + 12 built-in arrow icons.
• Starter templates: Multiple ready-to-use templates (Hero, Business, Portfolio, Testimonials, Promo / Sale, Product Launch, Team, Event, Startup, Minimal, Restaurant, Charity, Welcome).
• Embed via [boldslider id="your-slider-slug"] shortcode or Gutenberg block.
• Import / Export sliders as JSON.
• Duplicate sliders + slides in one click.
• Slider library page with thumbnail previews + search.
• Performance: lazy-load images, no jQuery, no external CDN, deferred JS.
• SEO friendly: semantic <h1>–<h6> headings, alt and title attributes (Media Library or custom).
• Accessibility: keyboard navigation, proper ARIA labels.

External services

BoldSlider does not call out to any external services or CDNs. All assets are bundled locally inside the plugin.

Development

Source code

The compiled/minified JavaScript and CSS files in assets/dist/ are built from the uncompressed source code included in this plugin:

• Editor UI (React): editor/src/ — JSX components, store, hooks, views, and SCSS styles.
• Frontend runtime: editor/src/frontend.js — Swiper initialization and layer animations.
• Block editor script: editor/src/block.js — Gutenberg block registration.
• Stylesheets: editor/src/editor.scss and editor/src/frontend.scss.

Build instructions

Prerequisites: Node.js 18+ and npm 9+.

1. Navigate to the plugin directory: cd boldslider
2. Install dependencies: npm install
3. Build production assets: npm run build
4. For development with live rebuild: npm run start

The build pipeline uses @wordpress/scripts (webpack-based).

Third-party libraries

• Swiper v11 — MIT License — touch-enabled slider engine.