Lovro Hrust

<p>Block based slider, leverages the speed and versatility of the <a href="https://swiperjs.com/" rel="nofollow ugc">Swiper slider</a>.</p>
<h4>Key Features</h4>
<ul>
<li>🥇 <strong>Insert Any Block as a Slide</strong>: No restrictions! Use the full power of the WordPress block editor.</li>
<li>🥈 <strong>Flexible Configuration</strong>: Use Swiper’s full range of features by entering the JSON configuration.</li>
<li>🥉 <strong>Lightweight & Fast</strong>: Uses only <a href="https://swiperjs.com/" rel="nofollow ugc">Swiper</a> library as dependency.</li>
<li>🌟 <strong>Developer-Friendly</strong>: The source code is fully available, making it easy to customize with hooks.</li>
</ul>
<h4>NEW!</h4>
<p>I am accepting suggestions for new features and improvements.<br />
If you have an idea, please <a href="https://github.com/Lovor01/makeiteasy-slider/issues" rel="nofollow ugc">open an issue on GitHub</a><br />
or write here in support section.</p>
<h4>JSON configuration how to</h4>
<p>Head to Swiper docs, to <a href="https://swiperjs.com/swiper-api#parameters" rel="nofollow ugc">Parameters section</a> to find parameter you need.<br />
More elaborate configuration for some features is available further below on page, in <a href="https://swiperjs.com/swiper-api#modules" rel="nofollow ugc">Modules section</a>.<br />
Once you found the parameters you need, write them as JSON instead as javascript object, i.e.:</p>
<pre><code>{
    autoplay: {
        delay: 6000,
        disableOnInteraction: true
    },
    pagination: {
        clickable: true
    }
}
</code></pre>
<p>would be written as</p>
<pre><code>{
    "autoplay": {
        "delay": 6000,
        "disableOnInteraction": true
    },
    "pagination": {
        "clickable": true
    }
}
</code></pre>
<p>And enter them on settings tab in block sidebar under Advanced slider configuration section.<br />
You can learn more about JSON in <a href="https://stackoverflow.blog/2022/06/02/a-beginners-guide-to-json-the-data-format-for-the-internet/" rel="nofollow ugc">Stackoverflow blog</a> or on <a href="https://www.w3schools.com/js/js_json_intro.asp" rel="nofollow ugc">W3schools page</a>.</p>
<p>Your JSON configuration merges with default configuration needed for swiper to run. You can break slider functioning through misconfiguration, so this is the first place to look if something does not work.<br />
There is a built in syntax checker in Advanced slider settings box,</p>
<h3>Developers</h3>
<p>There is a full source code on <a href="https://github.com/Lovor01/makeiteasy-slider" rel="nofollow ugc">github</a>. You can investigate code, adjust it to your needs, collaborate, …</p>


Makeiteasy Slider

Slider based on very popular library Swiper! Insert blocks as slides. Truly open source.

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.

Makeiteasy Slider vs BoldSlider