Mahabub Alam

<p>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.</p>
<h4>Free version highlights</h4>
<ul>
<li><strong>Visual builder</strong> — drag, resize, rotate layers on a real canvas. Eight resize handles. Keyboard nudge + delete.</li>
<li><strong>Per-device responsive</strong> — override layer position, size, font size, color, and visibility separately for Desktop / Tablet / Mobile.</li>
<li><strong>Layer types (7 free):</strong> Heading, Paragraph, Image, Button, Shape, YouTube embed, Vimeo embed.</li>
<li><strong>Slider effects:</strong> Slide, Fade, Cube, Coverflow, Flip, Cards.</li>
<li><strong>Backgrounds:</strong> image (with cover/contain/percentage/auto fit, repeat, 9-grid + custom position), color, uploaded MP4 video.</li>
<li><strong>Background animations:</strong> Ken Burns, Zoom In, Zoom Out, Pan Left, Pan Right.</li>
<li><strong>Navigation arrows</strong> with placement (inside/outside) + position (top/middle/bottom) + size + offset + colors + hover styles.</li>
<li><strong>Pagination</strong> (bullets / fraction / progress bar) with placement, position, bullet size/gap, clickable, active + inactive colors.</li>
<li><strong>Thumbnail strip</strong> (Swiper Thumbs).</li>
<li><strong>Autoplay</strong> with delay + pause-on-hover.</li>
<li><strong>Layer animations</strong> — 8 CSS-based entrance presets (fade, fade-up/down/left/right, zoom-in/out).</li>
<li><strong>Button hover styles</strong> + 12 built-in arrow icons.</li>
<li><strong>Starter templates:</strong> Multiple ready-to-use templates (Hero, Business, Portfolio, Testimonials, Promo / Sale, Product Launch, Team, Event, Startup, Minimal, Restaurant, Charity, Welcome).</li>
<li><strong>Embed</strong> via <code>[boldslider id="your-slider-slug"]</code> shortcode or Gutenberg block.</li>
<li><strong>Import / Export</strong> sliders as JSON.</li>
<li><strong>Duplicate</strong> sliders + slides in one click.</li>
<li><strong>Slider library page</strong> with thumbnail previews + search.</li>
<li><strong>Performance:</strong> lazy-load images, no jQuery, no external CDN, deferred JS.</li>
<li><strong>SEO friendly:</strong> semantic <code><h1></code>–<code><h6></code> headings, <code>alt</code> and <code>title</code> attributes (Media Library or custom).</li>
<li><strong>Accessibility:</strong> keyboard navigation, proper ARIA labels.</li>
</ul>
<h4>External services</h4>
<p>BoldSlider does not call out to any external services or CDNs. All assets are bundled locally inside the plugin.</p>
<h3>Development</h3>
<h4>Source code</h4>
<p>The compiled/minified JavaScript and CSS files in <code>assets/dist/</code> are built from the uncompressed source code included in this plugin:</p>
<ul>
<li><strong>Editor UI (React):</strong> <code>editor/src/</code> — JSX components, store, hooks, views, and SCSS styles.</li>
<li><strong>Frontend runtime:</strong> <code>editor/src/frontend.js</code> — Swiper initialization and layer animations.</li>
<li><strong>Block editor script:</strong> <code>editor/src/block.js</code> — Gutenberg block registration.</li>
<li><strong>Stylesheets:</strong> <code>editor/src/editor.scss</code> and <code>editor/src/frontend.scss</code>.</li>
</ul>
<h4>Build instructions</h4>
<p>Prerequisites: Node.js 18+ and npm 9+.</p>
<ol>
<li>Navigate to the plugin directory: <code>cd boldslider</code></li>
<li>Install dependencies: <code>npm install</code></li>
<li>Build production assets: <code>npm run build</code></li>
<li>For development with live rebuild: <code>npm run start</code></li>
</ol>
<p>The build pipeline uses <code>@wordpress/scripts</code> (webpack-based).</p>
<h4>Third-party libraries</h4>
<ul>
<li><a href="https://swiperjs.com/" rel="nofollow ugc">Swiper</a> v11 — MIT License — touch-enabled slider engine.</li>
</ul>


BoldSlider

A fast, modern WordPress slider plugin with a visual layer editor. Powered by Swiper. No jQuery, no external CDN.

BoldSlider vs SiteOrigin Widgets Bundle